Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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

Posted on 2004-10-29
Medium Priority
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?


Question by:DirkManuel
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 33

Expert Comment

ID: 12448269

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);
LVL 13

Expert Comment

ID: 12448320
It worked fine for me, Dirk.

Make sure you don't have

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

Accepted Solution

Zvonko earned 300 total points
ID: 12448374
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.

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

LVL 63

Expert Comment

ID: 12448550
Why the grading B???

Expert Comment

ID: 12448561
Did you remove <script> & </script> tags from external js file ?


Author Comment

ID: 12448722
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...
LVL 63

Expert Comment

ID: 12448912
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.

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

610 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