Javascript: document.getElementById() returns NULL

Question

I am quite new with Javascript and I got a problem with document.getElementById() that always returns NULL, and that's driving me nuts.

I have a element in my code and I want to get its coordinates so I can move it.

Here is the code:

<html>
  <head>
    <script type="text/javascript" >
      function MoveIt(obj) {
        alert(obj); // returns "Object HTMLDivElement"
        var xx = document.getElementById("arect");

        if(document.getElementById("arect").value == null) {
          alert('NULL >> ' + xx.value);
        }
        else {
          alert('NOT NULL >>' + xx.value);
        }

        posX = xx.style.scrollTop;
        posY = xx.style.left;
      }
    </script>
  </head>

  <body bgcolor="white" >
    <DIV class="background" id="MyDiv2">  
      <div id="arect" name="arect" class="transbox" onmousedown="MoveIt(this);" >
      </div>
    </div>
  </body>
</html>

The above function MoveIt() always returns NULL

Please consider cleaning up your code snipit and remove the css as it adds nothing but clutter to you problem. Are you certain that an element with id "arect" exists and are you calling that code after the dom load. Provide the HTML that corresponds with the JS. — scrappedcola
– scrappedcola, Commented May 24, 2011 at 14:54
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> - ??? This is supposed to be a HTML page, riiight? — thirtydot
– thirtydot, Commented May 24, 2011 at 14:55
given that you're passing this into the function, and it should equal the object you're trying to get, why do you even need getElementById()? You should be able to just use obj. — Spudley
– Spudley, Commented May 24, 2011 at 14:59
You pass your object to your function, but you are not using it :( ... obj = document.getElementById('arect'). — Kraz
– Kraz, Commented May 24, 2011 at 15:04

Dennis · Accepted Answer · 2015-04-20 19:47:19Z

32

The page contents need to be loaded before trying to read them. Try

window.onload = function() {
  // run your script in here
}

Or if you're using jQuery, prefer

$(document).ready(function() {
  ...
}

edited Apr 20, 2015 at 19:47

Dennis

60.1k28 gold badges148 silver badges143 bronze badges

answered Dec 17, 2012 at 19:51

Sailab Rahi

6201 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lightness Races in Orbit · Accepted Answer · 2011-05-24 15:00:54Z

8

You never checked getElementById(...) for NULL.

You checked getElementById(...).value for NULL, and divs don't have a "value".

Also note that you forgot to close that <div /> tag, which is illegal in your XHTML... and used an SVG doctype for some reason. SVG is not HTML.

It's not really clear what you're trying to do here.

answered May 24, 2011 at 15:00

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

3 Comments

pasta Over a year ago

Thanks, I forgot to remove SVG doctype. "value" is removed now, but that still does not work

Lightness Races in Orbit Over a year ago

@pasta: What "does not work"? What are you trying to do? Your use of document.getElementById is correct, so something else is up.

pasta Over a year ago

That's my point. The way I wrote is apparently "correct" but still have the pb, i.e. document.getElementById("arect") is always null

Pointy · Accepted Answer · 2011-05-24 14:59:06Z

8

The "arect" element is a <div>, and <div> elements don't have a "value".

Get rid of that bogus SVG doctype too.

answered May 24, 2011 at 14:59

Pointy

415k62 gold badges600 silver badges631 bronze badges

4 Comments

pasta Over a year ago

Thanks, I forgot to remove SVG doctype. "value" is removed now, but that still does not work

Pointy Over a year ago

@pasta yes actually it does work - make sure you get rid of all the references to ".value" from the <div> - that includes "xx.value" etc

pasta Over a year ago

Thanks a lot it works now, I did some code cleaning and it works ;) Also, do you know how to get the coordinates of the <div> ? I tried with obj.style.left but that returns nothing...

Pointy Over a year ago

@pasta getting coordinates in general can be tricky - probably should write up a whole separate question for that one :-)

MNIK · Accepted Answer · 2011-05-24 15:00:31Z

3

if(document.getElementById("arect").value == null){
    alert('NULL >> '+ xx.value);
  }

This code always returns null or error. If you want to see if the object exists, do the following....

if(xx == null)
   alert('Object does not exist');
else 
   alert('Object exists. Inner HTML: ' + xx.innerHTML);

Also, div does not have value. If you want to get the html inside div, use xx.innerHTML

answered May 24, 2011 at 15:00

MNIK

1,6293 gold badges17 silver badges22 bronze badges

1 Comment

Lightness Races in Orbit Over a year ago

@pasta: What should it be? I can't see any content inside that div.

Vijender Reddy · Accepted Answer · 2012-10-17 15:28:01Z

-1

if the button is set to visisble= false then you cannot get the id of that button on client side. To hide the button use

button1.Style.Add("display","none")-- for visible false

and

button1.Style.Add("display","block")-- for visible true

and even if button is enabled false we cannot get the Id of the button on client side

You can get the id of the button by document.getElementById('<%= button1.ClientID %>'); Or if you set the ClientIDMode="Static" for the control in aspx page you can get it directly by document.getElementById('button1'); Or document.getElementById('MainContent_button1');--- MainContent here is the Id of the contentplaceholder if you have the id of the contenet placeholder different use that id_button1.

edited Oct 17, 2012 at 15:28

answered Oct 16, 2012 at 20:39

Vijender Reddy

11 bronze badge

2 Comments

betomontejo Over a year ago

Don't sign your posts. Read the FAQ on this.

Sir Crispalot Over a year ago

There is no mention in the question of ASP.NET, but that seems to be where you're approaching this from.

Dogugun Ozkaya · Accepted Answer · 2014-03-07 14:33:17Z

-1

in my case it was because of having this line at the beginning of the jsp/html(whatever) file:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

removing it solved my problem.

answered Mar 7, 2014 at 14:33

Dogugun Ozkaya

1341 silver badge8 bronze badges

Collectives™ on Stack Overflow

Javascript: document.getElementById() returns NULL

6 Answers 6

Comments

3 Comments

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

4 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related