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, May 24 '11 at 14:54
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, May 24 '11 at 14:59
You pass your object to your function, but you are not using it :( ... obj = document.getElementById('arect'). — Kraz, May 24 '11 at 15:04

score 32 · Answer 1 · edited Apr 20 '15 at 19:47

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 '15 at 19:47

Dennis

56,821
26
143
139

answered Dec 17 '12 at 19:51

Sailab Rahi

581
1
8
11

score 8 · Answer 2 · answered May 24 '11 at 14:59

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 '11 at 14:59

Pointy

405,095
59
585
614

Thanks, I forgot to remove SVG doctype. "value" is removed now, but that still does not work – pasta May 24 '11 at 15:15
@pasta yes actually it does work - make sure you get rid of **all** the references to ".value" from the `
` - that includes "xx.value" etc
– Pointy May 24 '11 at 15:27
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
? I tried with obj.style.left but that returns nothing...
– pasta May 24 '11 at 15:34
@pasta getting coordinates in general can be tricky - probably should write up a whole separate question for that one :-) – Pointy May 24 '11 at 15:37

score 8 · Accepted Answer · answered May 24 '11 at 15:00

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 '11 at 15:00

Lightness Races in Orbit

378,754
76
643
1,055

Thanks, I forgot to remove SVG doctype. "value" is removed now, but that still does not work – pasta May 24 '11 at 15:16
@pasta: _What_ "does not work"? What are you trying to do? Your use of `document.getElementById` is correct, so something else is up. – Lightness Races in Orbit May 24 '11 at 15:16
That's my point. The way I wrote is apparently "correct" but still have the pb, i.e. document.getElementById("arect") is always null – pasta May 24 '11 at 15:20

score 3 · Answer 4 · answered May 24 '11 at 15:00

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 '11 at 15:00

MNIK

1,581
3
16
22

@pasta: What should it be? I can't see any content inside that `div`. – Lightness Races in Orbit May 24 '11 at 16:46

Vijender Reddy · Answer 5 · 2012-10-17T15:28:01.207

-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 '12 at 15:28

answered Oct 16 '12 at 20:39

Vijender Reddy

1
1

Don't sign your posts. Read the [FAQ](http://stackoverflow.com/faq#signatures) on this. – betomontejo Oct 16 '12 at 20:45
There is no mention in the question of ASP.NET, but that seems to be where you're approaching this from. – Sir Crispalot Oct 16 '12 at 20:46

score -1 · Answer 6 · answered Mar 07 '14 at 14:33

-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 07 '14 at 14:33

Dogugun Ozkaya

134
1
8

Javascript: document.getElementById() returns NULL

6 Answers6

Linked