javascript - 基本测验的 if else 循环逻辑有困难

问题描述

我正在尝试构建一个基本测验，并且在最后一部分遇到困难：在最后一个问题得到回答后，我想提醒（“测验结束”）并将变量重置为 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>

标签： javascript

首先，在最后修复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
}

它将按预期工作。工作小提琴。

javascript - 基本测验的 if else 循环逻辑有困难

问题描述

解决方案

推荐阅读