我有一个测验，一旦你选择答案就应该转到下一个问题，但目前我的代码不起作用，它允许用户选择多个答案，之后不会发生任何事情。
一旦完成最后一个问题，他们的结果就会显示给他们。
document.getElementById("beginquiz").addEventListener("click", startQuiz);
function startQuiz() {
document.getElementById("intro").style.display = "none";
document.getElementById("q1").style.display = "block";
}
var answerData = {
"p": 0,
"vp_w": 0,
"vp_e": 0,
"vp_a": 0,
"vp_s": 0
};
var buttons = document.querySelectorAll(".button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = buttonClicked;
}
function buttonClicked(buttonNext) {
var target = answer.target; //1. 'this' is parent, need target
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
this.parentElement.style.display = "none";
//Work out what the next question div is
var nextQuestion = this.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
function calculateResult (answerData){
var highest = Math.max(total_points.p, total_points.vp_s, total_points.vp_e, total_points.vp_w, total_points.vp_a);
var result;
for (var i in total_points) {
if (total_points.hasOwnProperty(i)){
if (total_points[i] === highest){
result = i;
}
}
}
switch(result) {
case 'p':
result = 'President';
break;
case 'vp_w':
result = 'Vice-President Welfare';
break;
case 'vp_e':
result = 'Vice-President Education';
break;
case 'vp_s':
result = 'Vice-President Sports';
break;
case 'vp_a':
result = 'Vice-President Activities';
break;
default:
break;
}
return result;
};
function printResult() {
document.getElementById('result').innerHTML = '<h2>You are: '+result+'</h2>';
}.question,
#result {
display: none;
}
.button li {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 80%;
margin: 0 auto;
}
.button li:hover {
color: #bfbfbf;
background-color: #555;
}
#intro,
.question,
#result {
max-width: 600px;
margin: 0 auto;
}
#beginquiz {
border: 1px solid;
border-radius: 3px;
background-color: #eee;
text-align: center;
line-height: 2em;
padding: 0.5em;
margin: 0.5em;
width: 20em;
margin: 0 auto;
}
#beginquiz:hover {
color: #bfbfbf;
background-color: #555;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="intro">
<button id="beginquiz">Start the quiz</button>
</div>
<form name="quiz" method="post" name="buttons" id="quiz" onsubmit="return false">
<div class="question" id="q1" data-next="q2">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q2" data-next="q3">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q3" data-next="q4">
<li><div id="q3" data-next="q4">What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
<div class="question" id="q4">
<li><div>What is?</div></li>
<input id="answer" type="radio" data-score="p">Answer 1<br>
<input id="answer" type="radio" data-score="vp_a">Answer 2<br>
<input id="answer" type="radio" data-score="vp_s">Answer 3<br>
<input id="answer" type="radio" data-score="vp_w">Answer 4<br>
<input id="answer" type="radio" data-score="vp_e">Answer 5<hr>
</div>
</form>
<div id="result">
<h2>You are:</h2>
</div>
答案 0 :(得分：0)
在按钮点击的功能中，您在获取元素时遇到了一些错误。这是更新的功能。 printResults中还有一个错误，即没有调用显示结果div。您也没有调用calulateResults函数。
function buttonClicked(buttonNext) {
//var target = answer.target; //1. 'this' is parent, need target
var target;
for(i=answer.length-1;i>=0;i--){
if(answer[i].checked == true){
target = answer[i];
break;
}
}
console.log(target);
//get the current element's data-score value
var selectedType = target.dataset.score; //2. score is the value
//increase the selected answer's 'type' by 1
console.log(selectedType);
answerData[selectedType]++;
//Hide the current question div
console.log(target.parentElement.id);
//this.parentElement.style.display = "none";
target.parentElement.style.display = "none"
//Work out what the next question div is
var nextQuestion = target.parentElement.dataset.next;
//Display the next question element
console.log(nextQuestion);
//document.getElementById(nextQuestion).style.display = "block";
if(document.getElementById(nextQuestion))
document.getElementById(nextQuestion).style.display = "block";
else
printResult();
}
您需要使用for循环来获取答案数组中的目标答案。我递减循环以获得最后回答的问题。另一个变化是如何获得父ID。有了this.parentElement，由于这个元素集中在表单上，因为这个元素引发了clcik事件，所以它与body一起回来了。我最后注意到了额外的document.getElementById（nextQuestion）.style.display =“block”;在检查之前。