2014-01-24 2 views
-1

웹 사이트를 시작할 때 JavaScript가 작동하지 않습니다.JavaScript의 변수 : 오류가 발생했습니다.

TypeError: 'null' is not an object (evaluating 'document.getElementById("aktuell").innerHTML')

이 내 자바 스크립트 코드 : Safari는 오류 제공

<script> 
var aktueller = document.getElementById("aktuell").innerHTML; 
function go() { 
    neu = aktueller - 1; 
    document.getElementById("aktuell").innerHTML = neu; 
    if (neu == 1) { 
     document.getElementById("zweite").style.display = 'none'; 
     document.getElementById("dritte").style.display = 'none'; 
    } 
    else if (neu == 2) { 
     document.getElementById("dritte").style.display = 'none'; 
    } 
    else if (neu == 0) { 
     document.getElementById("erste").style.display = 'none'; 
     document.getElementById("zweite").style.display = 'none'; 
     document.getElementById("dritte").style.display = 'none'; 
    } 
} 
</script> 

을 그리고 이것은 내 사용되는 신체 일부입니다

스크립트가 평가
<body> 
<p id="aktuell" style="display:none;" >0</p> 
<center> 
    <button>Zur&uuml;ck</button><button onclick="go();">Weiter</button> 
</center> 
<div id="nullte"><img src="data/nullte.jpg" width="500px" /></div> 
<div id="erste"><img src="data/erste.jpg" width="500px" /></div> 
<div id="zweite"><img src="data/zweite.jpg" width="500px" /></div> 
<div id="dritte"><img src="data/dritte.jpg" width="500px" /></div> 
</body> 
+2

스크립트가 ''에있는 경우 찾고있는 요소가 아직 DOM의 일부가 아닙니다. 브라우저는 나머지 HTML을 구문 분석하기 전에 즉시 스크립트를 실행합니다. 스크립트를''의 맨 끝으로 옮길 수 있습니다. – Pointy

+0

자바 스크립트는 DOM이로드되기 전에 실행되므로 해당 ID를 가진 요소가 아직 존재하지 않습니다. 페이지가 있으면 스크립트를 맨 아래로 이동하거나'window.onload'에서 모든 것을 수행하십시오. – 11684

답변

0

, 몸 아직 지어지지 않았다. jQuery를 사용하여 스크립트와 본문의 끝을 배치하거나 문서 준비 섹션에 배치해야합니다.

$(document).ready(function() { 
    var aktueller = document.getElementById("aktuell").innerHTML; 
    /* more code goes here */ 
}); 

자세한 정보 here.

왜 내가 사용하지 않는지 window.onloadhere입니다.

+0

음, JQuery 태그가없고 바닐라 자바 ​​스크립트 (분명히 jQuery는 바닐라 자바 ​​스크립트로 작성 되었기 때문에)로 쉽게 수행 할 수 있기 때문에 jQuery를 포함시킬 이유가 없습니다. – 11684

+1

나는 -1을 이해하지 못한다. 필자는 평범한 자바 스크립트 솔루션 (스크립트를 몸체 끝으로 이동)을 제안했습니다. 또한 jQuery를 사용하여 더 나은 대안을 제시했습니다. 나는 -1이 정확하지 않다고 생각한다. (대답은 질문과 관련이 있고 유용하다.) –

+0

좋습니다. 동의합니다. 나는 -1 점을 제거했다. – 11684

3

당신은 페이지가 완전히로드 될 때까지 기다릴 필요가 :

<script> 
    var aktueller = null; 
    window.onload = function(){ 
     aktueller = document.getElementById("aktuell").innerHTML; 
    } 
    function go() { 
     //.... 
    } 
</script> 

당신은 또한 좋아합니까 수 있습니다

var aktueller = null; 
window.addEventListener("load", function(){ 
    aktueller = document.getElementById("aktuell").innerHTML; 
}); 

다른 옵션은 body 태그에 온로드 이벤트를 사용하는 것입니다

<head> 
<script type='text/javascript'> 
    var aktueller = null; 
    function init(){ 
     aktueller = document.getElementById("aktuell").innerHTML; 
    } 
    function go(){ 
     //... 
    } 
</script> 
</head> 
<body onload="init();"> 
</body> 

jquery를 사용하는 경우 다른 옵션이 있습니다 :

var aktueller = null; 
$(document).ready(function(){ 
    aktueller = $("#aktuell").html(); 
}); 
+3

DOM이 준비 될 때까지 jQuery를 사용하지만 관련 요소를 선택하지 않는 이유는 무엇입니까? – 11684

+0

나 자신은 보통 내 물건을 바닐라 자바 ​​스크립트로 처리하지만 모든 옵션을 언급하고 싶었다. –

+0

그럼'$ ("# aktuell") .html();'? – 11684

관련 문제