Solved

How to refer to a document element from within an external javascript file

Posted on 2004-10-29
259 Views
Last Modified: 2011-10-03
I want to get the x,y co-ordinates of a specific element in my HTML document.

The document contains the code:
...
<DIV ID="content">
...

If I put the following JavaScript code inside the SAME HTML file:
...
var obj = document.getElementById("content");
var x = obj.offsetLeft;
var y = obj.offsetTop;
alert(x + ", " + y);
...

Then I get the correct answer.  However, if I move this code to an external .js file which is then included in the actual HTML file by:
<script type="text/javascript" src="script.js"></script>

Then it fails with an 'Error object required' message.

What am I doing wrong?  I am thinking that maybe the 'document' reference isn't working as it is within a separate physical file, but I wouldn't know how to correct it.  Any clues?

Thanks,
Dirk

0
Question by:DirkManuel
    7 Comments
     
    LVL 33

    Expert Comment

    by:knightEknight

    function getX(obj)
    {
     return( obj.offsetParent==null ? obj.offsetLeft : obj.offsetLeft+getX(obj.offsetParent) );
    }

    function getY(obj)
    {
     return( obj.offsetParent==null ? obj.offsetTop : obj.offsetTop+getY(obj.offsetParent) );
    }


    var obj = document.getElementById("content");
    var x = getX(obj);
    var y = getY(obj);
    alert(x + ", " + y);
    0
     
    LVL 13

    Expert Comment

    by:cLFlaVA
    It worked fine for me, Dirk.

    Make sure you don't have

    <!--  --> surrounding your JS in your JS file.
    0
     
    LVL 63

    Accepted Solution

    by:
    The problem is that document.getElementById("content") can work first after <DIV ID="content"> is rendered.
    So put that script snippet in a function in that external script file and call that function in the body onload event handler.

    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    Why the grading B???
    0
     
    LVL 9

    Expert Comment

    by:riyasjef
    Hi
    Did you remove <script> & </script> tags from external js file ?

    RJ
    0
     

    Author Comment

    by:DirkManuel
    I graded it B because it answered my question but not my entire problem - I needed to get the x and y coords of an element to use to position a js menu, but the menu seems to get created before whatever is executed on the 'onload' so the values are still undefined at the point that I need them.  I tried creating the whole menu on the 'onload' but then it seems to replace the entire contents of the window with the menu.  I think I need to do some more research and playing around.  Maybe then I'll know what I'm asking...
    0
     
    LVL 63

    Expert Comment

    by:Zvonko
    Giving B's and not even saying Thank You will reduce the number of experts being happy when helped to you.
    Think about it and have a nice day.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Suggested Solutions

    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
    I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    845 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    8 Experts available now in Live!

    Get 1:1 Help Now