Question

我有一个javascript onclick函数（应该）根据当前分数收听特定的标签。这是一个测验。 onlick函数侦听右侧答案的单击（具有类权限）。在beginnig中，函数应该监听的正确答案是第一个具有类权限的标记。单击此答案后，应执行该功能并更改问题并将分数提高一。现在该函数应该使用正确的类来监听第二个标签。我得到了一个变量score2，它始终是选择正确的标签所需的值，但它不起作用。
守则：

var score = 0
var score2 = 0
    document.getElementById("go").onclick = function() {
    score++;
    console.log(score);
    console.log(score2);
    document.getElementById("head").style.display="inline";
    document.getElementById("question0").style.display="none";
    document.getElementById("question1").style.display="block";
};

document.getElementsByClassName("right")[score].onclick = function(){
score++;
score2++;
//console.log(score);
console.log(score2);
document.getElementById("question"+score2).style.display="none";
document.getElementById("question"+score).style.display="inline";
};

和html（测验用德语）

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="body">
    <div id="inbody">
    <div 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="head" style="display:none;">
    <h1>THE 100 QUESTION GAME</h1>
</div>


<div id="question1" style="display:none;">
    <h3>
        Von wo aus kann man nur nach S&uuml;den gehen?
    </h3>
    <br>
    <br>
    <a id="questionOneAnswerOne" class="right">Nordpol</a> <br> <!--Richtig-->
    <a id="questionOneAnswerTwo" class="wrong" href="http://100questiongame.tk/index.html">S&uuml;dpol</a> <br>
    <a id="questionOneAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">&Auml;quator</a> <br>
    <a id="questionOneAnswerFour" class="wrong" href="http://100questiongame.tk/index.html">Bayern</a> <br>
</div>

<div id="question2" style="display:none;">
    <h3>
        Was ist am teuersten?
    </h3>
    <br>
    <br>
    <a id="questionTwoAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Diamant</a> <br>
    <a id="quoestionTwonswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Platin</a> <br>
    <a id="questionTwoAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Gold</a> <br>
    <a id="questionTwoAnswerFour" class="right">Osmium</a> <br> <!--Richtig-->
</div>

<div id="question3" style="display:none;">
    <h3>
        Wof&uuml;r steht HTML?
    </h3>
    <br>
    <br>
    <a id="questionThreeAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Multiple Language</a> <br>
    <a id="questionThreeAnswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Hyper Text Markup Language</a> <br> <!--Richtig-->
    <a id="questionThreeAnswerThree" class="right">Hydrotecinmultiliquid</a> <br>
    <a id="questionThreeAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Hype The Mother (a)lLong<a/> <br>
</div>

<div id="question4" style="display:none;">
    <h3>
        Welche Farbe h&auml;tte Cola ohne Farbstoffe?
    </h3>
    <br>
    <br>
    <a id="questionFourAnswerOne" href="http://100questiongame.tk/index.html" class="wrong">Gelb</a> <br>
    <a id="questionFouranswerTwo" href="http://100questiongame.tk/index.html" class="wrong">Erdbraun</a> <br>
    <a id="questionFourAnswerThree" class="right">Grün</a> <br> <!--Richtig-->
    <a id="questionFourAnswerFour" href="http://100questiongame.tk/index.html" class="wrong">Türkis<a/> <br>
</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

</div>

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

到http://100questiongame.tk测试代码并转到https://floobits.com/BenBals/quiz.sublime-project以便在编辑时看到代码。

Answer 1

这是一种方法：

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

<div id="question1" style="display:none">
    <h3>
        Von wo aus kann man nur nach S&uuml;den gehen?
    </h3>
    <br><br>
    <a id="question1_1" onclick="nextQuestion(this)" href="#">Nordpol</a><br>
    <a id="question1_2" class="wrong" href="..">S&uuml;dpol</a><br>
    <a id="question1_3" class="wrong" href="..">&Auml;quator</a><br>
    <a id="question1_4" class="wrong" href="..">Bayern</a><br>
</div>

JS

var score = 1;

document.getElementById("go").onclick = function() {
    document.getElementById("go").style.display="none";
    document.getElementById("question"+score).style.display="block";
};

function nextQuestion (el){
    el.style.color="green";
    document.getElementById("question"+score).style.display="none";
    score++;
    document.getElementById("question"+score).style.display="inline";    
};

多次使用相同的javascript函数

1 个答案: