2013-02-28 6 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를 또는 \ '에서 getElementById는 \'하지 요소를 찾을 같은 DOM 방법은?] (http://stackoverflow.com/questions/14028959/why-does-jquery-or -a-dom-method-like-getelementbyid-not-find-the-element) – VisioN

+1

이 질문을하기 전에 검색했을 때 (그렇게 했습니까?) 정말로 357 번 이전의 "Why is 'document.getElementById'는'null' 질문과 그 답을 돌려 주나요? –

+0

[link] http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-lement – 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

요소는 아직 존재하지 않습니다.

<body onload="doMove()"> 

또는 단순히 ID '갑'과 사업부 아래의 스크립트를 이동 : 문제에 대한 간단한 솔루션과 같이 body 태그에 대한 온로드 스크립트에서 doMove에 전화를 이동하고 호출하는 것입니다.

이전 버전의 IE (pre IE9) 'addEventListener'에 대한 지원이 대안입니다. 다음 코드로 doMove에 전화를 바꿉니다.

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

코드를 변경하고 작성했습니다. 이제 document.getElementById ('foo')를 읽습니다. setTimeout()을 사용했지만 아무 것도하지 않기 때문에 20msec마다 div 요소를 이동하려고합니다.

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