我有一个 javascript onclick 函数，它(应该)根据当前分数监听特定的标签。这是为了测验。 onlick 函数监听对正确答案的点击(具有类权限)。在开始时，函数应该监听的正确答案是第一个带有正确类的标签。单击此答案后，应执行该函数，并且问题会发生变化，并且分数会提高一分。现在该函数应该监听具有正确类的第二个 a 标记。我有一个变量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ü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üdpol</a> <br>
<a id="questionOneAnswerThree" href="http://100questiongame.tk/index.html" class="wrong">Ä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ü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ä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在我编辑时查看代码。
最佳答案
这是一种方法:
演示:http://jsfiddle.net/97gCk/3/
<div id="question1" style="display:none">
<h3>
Von wo aus kann man nur nach Süden gehen?
</h3>
<br><br>
<a id="question1_1" onclick="nextQuestion(this)" href="#">Nordpol</a><br>
<a id="question1_2" class="wrong" href="..">Südpol</a><br>
<a id="question1_3" class="wrong" href="..">Ä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 - 多次使用相同的 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21970712/