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

DirkManuelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

knightEknightCommented:

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
cLFlaVACommented:
It worked fine for me, Dirk.

Make sure you don't have

<!--  --> surrounding your JS in your JS file.
0
ZvonkoSystems architectCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

ZvonkoSystems architectCommented:
Why the grading B???
0
riyasjefCommented:
Hi
Did you remove <script> & </script> tags from external js file ?

RJ
0
DirkManuelAuthor Commented:
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
ZvonkoSystems architectCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.