的getElementById可變

Question

我想用一個變量的getElementById，但它只是返回：

Uncaught TypeError: Cannot read property 'style' of null 

我的代碼如下有關

document.getElementsByClassName("right").onclick = function() { 
    score++; 
    score2++; 

    document.getElementsByClassName("right").style.color = "green"; 
    document.getElementsByClassName("wrong").style.color = "red"; 

    setTimeout(function() { 
     document.getElementById("question"+score2).style.display = "none"; 
     document.getElementById("question"+score).style.display = "inline"; 
    }, 1500); 
}; 

It'sa測驗，它應該做的是，當正確的答案（與班級權利）被點擊時，它應該爲分數加1，分數爲1（分數爲-1），而在1.5秒之後，正確和錯誤的答案用綠色和紅色突出顯示下一個答案應該出現。例如，在問題2之後，得分是3，代碼應該將顯示（表單css）從無（不可見）改爲內聯（可見），並且回答的問題應該消失。例如問題2 score2 = 2的代碼之後

document.getElementById("question"+score2).style.display="none"; 

應該使問題2，這是與ID問題2所有的人，像看不見一個div。

---編輯--- 整個代碼：

var score = 0 
var score2 =-1 
document.getElementById("go").onclick = function() { 
score++; 
score2++; 
console.log("Score:"); 
console.log(score); 
console.log("Score2:"); 
console.log(score2); 
document.getElementById("question"+score2).style.display="none"; 
document.getElementById("question"+score).style.display="block"; 
}; 

document.getElementsByClassName("right").onclick = function(){ 
score++; 
score2++; 
console.log("Score:"); 
console.log(score); 
console.log("Score2:"); 
console.log(score2); 
document.getElementsByClassName("right").style.color="green"; 
document.getElementsByClassName("wrong").style.color="red"; 
setTimeout(function(){ 
    document.getElementById("question"+score2).style.display="none"; 
    document.getElementById("question"+score).style.display="inline"; 
},1500); 
}; 

---編輯--- 的HTML代碼： 注：有一些問題的div W/O的內容，這些都是提出未來的問題。在我的js中，我使用每個div的第二個id（例如question8而不是questionEight）。

<div id="startScreen" id="question0"> 
    <h1> 
     WELCOME TO THE 100 QUESTION GAME! 
    </h1> 

    <h2 id="go" style="color:pink"> 
     Lets GO! 
    </h2> 
    <p> 
     by strawberry studios 
    </p> 

</div> 
<div id="questionOne" id="question1" style="display:none;"> 
    <h1> 
     Von wo aus kann man nur nach S&uuml;den gehen? 
    </h1> 
    <br> 
    <br> 
    <a id="questionOneAnswerOne" class="right">Nordpol</a> <br> <!--Richtig--> 
    <a id="questionOneAnswerTwo">S&uuml;dpol</a> <br> 
    <a id="questionOneAnswerThree">&Auml;quator</a> <br> 
    <a id="questionOneAnswerFour">Bayern</a> <br> 
</div> 

<div id="questionTwo" id="question2" style="display:none;"> 
    <h1> 
     Was ist am teuersten? 
    </h1> 
    <br> 
    <br> 
    <a id="questionTwoAnswerOne">Diamant</a> <br> 
    <a id="quoestionTwonswerTwo">Platin</a> <br> 
    <a id="questionTwoAnswerThree">Gold</a> <br> 
    <a id="questionTwoAnswerFour" class="right">Osmium</a> <br> <!--Richtig--> 
</div> 

<div id="questionThree" id="question3" style="display:none;"> 
    <h1> 
     Wof&uuml;r steht HTML? 
    </h1> 
    <br> 
    <br> 
    <a id="questionThreeAnswerOne">Hyper Text Multiple Language</a> <br> 
    <a id="questionThreeAnswerTwo">Hyper Text Markup Language</a> <br> <!--Richtig--> 
    <a id="questionThreeAnswerThree" class="right">Hydrotecinmultiliquid</a> <br> 
    <a id="questionThreeAnswerFour">Hype The Mother (a)lLong<a/> <br> 
</div> 

<div id="questionFour" id="question4" style="display:none;"> 
    <h1> 
     Welche Farbe h&auml;tte Cola ohne Farbstoffe? 
    </h1> 
    <br> 
    <br> 
    <a id="questionFourAnswerOne">Gelb</a> <br> 
    <a id="questionFouranswerTwo">Erdbraun</a> <br> 
    <a id="questionFourAnswerThree" class="right">Grün</a> <br> <!--Richtig--> 
    <a id="questionFourAnswerFour">Türkis<a/> <br> 
</div> 

<div id="questionFive" id="question5 "tyle="display:none;"> 

</div> 

<div id="questionSix" id="question6" style="display:none;"> 

</div> 

<div id="questionSeven" id="question7" style="display:none;"> 

</div> 

<div id="questionEight" id="question8" style="display:none;"> 

</div> 

<div id="questionNine" id="question9" style="display:none;"> 

</div> 

<div id="questionTen" id="question10" style="display:none;"> 

</div> 

<script type="text/javascript" src="javascript.js"></script> 

Answer 1

嘗試這樣的事情（jQuery的添加到您的項目）

$(".right").click(function() { 
score++; 
score2++; 

var QuestionIndex = document.getElementsByClassName("right").indexOf(this); 

document.getElementsByClassName("right")[QuestionIndex].style.color = "green"; 
document.getElementsByClassName("wrong")[QuestionIndex].style.color = "red"; 

setTimeout(function() { 
    document.getElementById("question"+score2).style.display = "none"; 
    document.getElementById("question"+score).style.display = "inline"; 
}, 1500); 
}); 

Answer 2

更改此

document.getElementsByClassName("right") 
document.getElementsByClassName("wrong") 

要

document.getElementById("right") 
document.getElementById("wrong") 

或（如果是自己的類名你參考）

document.getElementsByClassName("right")[0] 
document.getElementsByClassName("wrong")[0] 

UPDATE

演示：http://jsfiddle.net/97gCk/3/

Answer 3

document.getElementsByClassName("right") 

返回數組。可以有一個以上的元素用相同的類名，所以你說哪一個：如果元素存在

document.getElementsByClassName("right")[0].style.color="red"; 

是正確的。

Answer 4

答修正：問題是，顯然是 - 你把以前更多的代碼之後 - 即score和score2尚未初始化（所以這個答案不站在任何多爲目前的問題） 作爲簡單的例子http://jsfiddle.net/3L8qV/

Answer 5

您的代碼不工作貝科：當你不初始化在Javascript中的變量都可以在這裏發生了什麼使用你使用兩個ID爲div - 我不是說你不能有一個div兩個ID，因爲我不確定這個一般性陳述是否屬實。舉例來說，如果你有這個div：

<div id="questionThree" id="question3" style="display:none;"> 

此腳本不工作：

alert(getElementById('question3')); 

例子：http://jsfiddle.net/aY26X/3/