2013-02-28 3 views
-1

У меня есть этот кусок кода. Он получает ошибку document.getElementById ('foo') имеет значение null. Пожалуйста, помогите с этой проблемой.document.getElementById() is null

<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> 
+0

возможно дубликат [Почему JQuery или метод DOM, такие как \ 'getElementById \' не найти элемент?] (Http://stackoverflow.com/questions/14028959/why-does-jquery-or -a-dom-method-such-as-getelementbyid-not-find-the-element) – VisioN

+1

Когда вы искали, прежде чем задавать этот вопрос (вы это сделали, правильно?), вам действительно удалось упустить из виду 357 предыдущих «Почему 'document.getElementById' возвращающие« нулевые »вопросы и их ответы? –

+0

См. Это [ссылка] http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – user1802597

ответ

7

Это потому, что объект еще не существует при выполнении сценария.

Простейшим решением является перемещение вашего скрипта в конце тела.

Другим решением является ждать DOM для загрузки:

window.addEventListener('load', doMove); 
0

Вставьте код в нижней части непосредственно перед закрывающим тэгом тела.

0

Попробуйте разместить сценарий в конце тела документа.

Как это:

<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> 
0

Элемент еще не существует, когда скрипт запускается. Простое решение вашей проблемы будет двигаться вызов doMove из сценария и назвать его OnLoad для тела тега так:

<body onload="doMove()"> 

Или просто переместить сценарий ниже DIV с идентификатором «Foo».

Если поддержка более старых версий IE (pre IE9) 'addEventListener' является альтернативой. Замените ваш звонок на doMove с помощью этого фрагмента:

window.addEventListener('load', doMove); 
0

Я изменил свой код и написал это. Теперь он читает document.getElementById ('foo'). Я хочу переместить мой элемент div каждые 20 мсек за то, что я использовал setTimeout(), но ничего не делает.

<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> 
Смежные вопросы