我正在尝试建立一个基本的测验，并且在最后一部分上遇到了困难：在回答了最后一个问题之后，我想发出警报（“测验结束”）并将变量重置为0。
我已经提出：如果问题号大于问题长度的数组，则输出“测验结束” ..但它仅在测验结束后的第二次单击后才输出。它过早输出此警报一个问题。
有人可以解释一下我是否要走正确的路吗？有没有一种方法可以解决我编写而不重写所有逻辑的问题？我敢肯定，有很多方法可以做到这一点，我真的很想知道如何改进我的方法。
（如果您全屏打开代码段，则该按钮不会被错误隐藏）
//JSON style data
var allQuestions = [
{
question: "Who is Prime Minister of the United Kingdom?",
choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"],
correctAnswer: 0
},
{
question: "What is your favourite colour?",
choices: ["Green", "Brown", "Blue", "Red"],
correctAnswer: 0
},
{
question: "Who is your name?",
choices: ["Bob", "Paul", "Andrey", "Alex"],
correctAnswer: 0
},
];
//VARIABLES
var question = document.querySelector('.questionX');
var questionNumber = 0;
var answer = document.querySelector('.userAnswer');
var score = 0;
//FUNCTION EXPRESSION TO UPDATE THE DOM WITH TEXT
let updateText = function(){
if (typeof allQuestions[questionNumber].question !== 'undefined') {
// the question is defined & exists
question.innerHTML = allQuestions[questionNumber].question
for (i = 0; i < allQuestions[questionNumber].choices.length; i++) {
//ADD AN OPTION ELEMENT WITH innerHTML of allQuestions[questionNumber].choices[i] and a value equal to the count of the loop.
var newOption = document.createElement("option")
newOption.appendChild(document.createTextNode(allQuestions[questionNumber].choices[i]))
answer.appendChild(newOption)
//set the value of each option element to the iteration count of the loop.
newOption.value = i
}
} else return
}
//load first question on window load
window.onload = updateText();
//CLEAR THE QUESTIONS OPTIONS
let clearOptions = function (){
while (answer.children[1]) {
answer.removeChild(answer.children[1]);
}
}
//onClick function for next qestion button
function nextQuestion(){
//if questionNumber > allQuestions.length alert you scored score out of allQuestions.length and set score to 0 and question to 0 and remove & rerender possible answers.
if (questionNumber >= allQuestions.length) {
alert(`end of quiz, you scored ${score} out of ${allQuestions.length}`);
score == 0;
questionNumber == 0;
clearOptions();
updateText();
}
//else if value of answer = value of correct answer add 1 to score and add 1 to question number & remove old options & update the dropdown with new options.
else if (document.querySelector('.userAnswer').value == allQuestions[questionNumber].correctAnswer) {
questionNumber += 1;
alert("Yay");
clearOptions();
score += 1;
updateText();
}
//else alert ("ney") and stay on same question
else{
alert("Ney, try again")
}
}
document.querySelector("#nextQuestion").addEventListener('click', function (){
nextQuestion();
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="d-flex mx-auto mt-5 mb-5">
Quiz
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 mx-auto">
<form>
<div class="form-group">
<p class="questionX">What is your favourite instrument?</p>
</div>
<select class="userAnswer custom-select mb-3">
<option disabled selected>Pick one</option>
<!-- <option value="0">Guitar</option>
<option value="1">Violin</option>
<option value="2">Oboe</option> -->
</select>
</form>
<button type="button" id="nextQuestion" class="btn btn-primary d-flex mx-auto mt-2">Next</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>最佳答案
首先，在最后修复question undefined err，以更改此设置：
if (typeof allQuestions[questionNumber].question !== 'undefined')
对此：
if (allQuestions[questionNumber] )
然后更改此
if：if (questionNumber >= allQuestions.length) {
alert(`end of quiz, you scored ${score} out of ${allQuestions.length}`);
score == 0;
questionNumber == 0;
clearOptions();
updateText();
}
对此：
if (questionNumber == allQuestions.length -1 ) {
alert(`end of quiz, you scored ${score+1} out of ${allQuestions.length}`);
score == 0;
questionNumber == 0;
clearOptions();
// updateText(); <-- you do not need this
}
它将按预期工作。工作fiddle。
关于javascript - 难以进行基本测验的if else循环逻辑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54391940/