document.getElementById() is null

Question

I have this piece of code. It is getting an error document.getElementById('foo') is null. Please help with this problem.

<script>
function doMove() {
    var foo=document.getElementById('foo');
    foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
    setTimeout(doMove(),20); // call doMove() in 20 msec
}
doMove();
</script>

</head>
<body>
<div id="foo" style="width:10px;">a</div>
</body>
</html>

possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — VisioN, Feb 28 '13 at 08:42
When you were searching before asking this question (you did that, right?) did you really manage to overlook the 357 previous "Why is `document.getElementById` returning `null`" questions and their answers? — T.J. Crowder, Feb 28 '13 at 08:43
See this [link] http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — user1802597, Feb 28 '13 at 09:00

score 7 · Answer 1 · answered Feb 28 '13 at 08:41

7

That's because the object doesn't yet exist when the script is executed.

The simplest solution is to move your script at the end of the body.

Another solution is to wait for the DOM to be loaded :

window.addEventListener('load', doMove);

answered Feb 28 '13 at 08:41

Denys Séguret

335,116
73
720
697

score 0 · Answer 2 · answered Feb 28 '13 at 08:42

0

Paste the code at the bottom just before the body close tag.

answered Feb 28 '13 at 08:42

Sudip Pal

1,947
1
10
16

score 0 · Answer 3 · answered Feb 28 '13 at 08:42

Try placing the script at the end of the document's body.

Like this:

<body>
<div id="foo" style="width:10px;">a</div>
<script>
function doMove() {
var foo=document.getElementById('foo');
     foo.style.left = (foo.style.left+10)+'px'; // pseudo-property code: Move right by 10px
     setTimeout(doMove(),20); // call doMove() in 20 msec
    }
    doMove();
</script>
</body>

Luc · Answer 4 · 2013-02-28T08:52:04.533

The element does not yet exist when the script is run. A simple solution to your problem would be to move the call to doMove from the script and call it onload for the body tag like so:

<body onload="doMove()">

Or simply move the script below the div with id 'foo'.

If support for older versions of IE (pre IE9) 'addEventListener' is an alternative. Replace your call to doMove with this snippet:

window.addEventListener('load', doMove);

score 0 · Answer 5 · answered Feb 28 '13 at 08:53

I have changed my code and written this. It is now reading document.getElementById('foo'). I want to move my div element every 20msec for that I have used setTimeout() but it doesn't do anything.

<body>
<div id="foo" style="width:10px;">a</div>
<script language="javascript">
function doMove() {
var foo=document.getElementById('foo');
     foo.style.left = parseInt(foo.style.left)+10+'px'; // pseudo-property code: Move right by 10px
     setTimeout(doMove,20); // call doMove() in 20 msec
    }
    doMove();
</script>
</body>
</html>

document.getElementById() is null

5 Answers5