变量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);
};

这是一个小测验，它应该做的是，当一个正确的答案(有正确的类)被点击时，它应该将1分加到score2 (分数-1)，而在1.5秒之后，正确和错误的答案用绿色和红色高亮显示，下一个答案就会出现。例如，在问题2之后，分数为3，代码应该将显示(形式css)从none (不可见)更改为内联(可见)，所回答的问题应该消失。例如，在问题2之后，score2=2和代码

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

应该使与id question2相同的div中的问题2不可见。

--编辑--整个代码：

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代码:注意:这里有一些问题divs /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")

返回数组。可以有多个具有相同className的元素，因此您必须说明哪个元素：

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

如果元素存在的话是正确的。

Answer 3

答案纠正了:问题很明显是，在你写更多代码之前，score和score2还没有被初始化(所以这个答案不再代表当前的问题了)，因为在Javascript中没有初始化变量的简单例子可以是：http://jsfiddle.net/3L8qV/。