Link to home
Start Free TrialLog in
Avatar of DirkManuel
DirkManuel

asked on

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

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

Avatar of knightEknight
knightEknight
Flag of United States of America image


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);
Avatar of cLFlaVA
cLFlaVA

It worked fine for me, Dirk.

Make sure you don't have

<!--  --> surrounding your JS in your JS file.
ASKER CERTIFIED SOLUTION
Avatar of Zvonko
Zvonko
Flag of North Macedonia image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Why the grading B???
Hi
Did you remove <script> & </script> tags from external js file ?

RJ
Avatar of DirkManuel

ASKER

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...
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.