如何浏览测验中的问题？

Question

我正在做一个测验项目。 我想转到下一个问题。
但是我遇到了关于 getElementById() 问题的问题：

<!-- my html -->
    <div id="container">

        <div id="QuestionContainer", style="display:block;">
            <h2 style="margin-left:30px" id="questionNum"></h2>

            <div id="question" style="font-size:20px; font-weight:bolder;margin-bottom:20px; margin-left:30px;">    

            </div>

            <div id="answerContainer">
                    <button value="0" id="choice0" name="answer" class="aButton" onclick="checkAnswer(this.value)">
                        <label id="label0" class="label"></label>
                    </button>

                    <button value="1" id="choice1" name="answer" class="aButton" onclick="checkAnswer(this.value)">
                        <label id="label1" class="label"></label>
                    </button>

                    <button value="2" id="choice2" name="answer" class="aButton" onclick="checkAnswer(this.value)"> 
                        <label id="label2" class="label"></label>
                    </button>

                    <button value="3" id="choice3" name="answer" class="aButton" onclick="checkAnswer(this.value)">
                        <label id="label3" class="label"></label>
                    </button>

            </div>

        </div>

        <button id="back" class="navButton"> Back </button>
        <button id="next" class="navButton"> Next </button>

    </div>

这是我检查答案和导航问题的 js 代码。

var questions = [
    new Question("Hyper question Markup Language Stand For?", ["JavaScript", "XHTML","CSS", "HTML"], "HTML", 3),
    new Question("Which language is used for styling web pages?", ["HTML", "JQuery", "CSS", "XML"], "CSS", 2),
    new Question("Which is not a JavaScript Framework?", ["Python Script", "JQuery","Django", "NodeJS"], "Django", 2),
    new Question("Which is used for Connect To Database?", ["PHP", "HTML", "JS", "All"], "PHP", 0)
];

var quiz = new Quiz(questions);

function Question(question, choices, answer, keyId){
    this.question = question;
    this.choices = choices;
    this.answer = answer;
    this.keyId = keyId;
}

function Quiz(questions){
    this.questions = questions;
    this.questionIndex = 0;
    this.questionAnswered = 0;
    this.correctAnswer = 0;
    this.start = 0;
}

Quiz.prototype.isEnded = function(){
    return (this.questionAnswered === 2);
}

Quiz.prototype.getQuestion = function(){
    return (this.questions[this.questionIndex]);
}

Quiz.prototype.isNext = function(){
    var button = document.getElementById("next");
    button.onclick = function(){
        this.questionIndex++;
    }
}


function isNextQuestion(quiz){
    var button1 = document.getElementById("next");
    var button2 = document.getElementById("back");
    button1.onclick = function(){
        quiz.questionIndex++;
    }
    button2.onclick = function(){
        quiz.questionIndex--;
    }

}

function setQuestion(quiz) {
    
    if (!quiz.isEnded())
    {
        document.getElementById("questionNum").innerHTML = "Question " + (quiz.questionIndex + 1);
        document.getElementById("question").innerHTML = quiz.questions[quiz.questionIndex].question;

        document.getElementById('label0').innerHTML = quiz.questions[quiz.questionIndex].choices[0];
        document.getElementById('label1').innerHTML = quiz.questions[quiz.questionIndex].choices[1];
        document.getElementById('label2').innerHTML = quiz.questions[quiz.questionIndex].choices[2];
        document.getElementById('label3').innerHTML = quiz.questions[quiz.questionIndex].choices[3];
    }
}


function getStarted(quiz){
    setQuestion(quiz);
}

function checkAnswer(value) {
    setQuestion(quiz);
    if (parseInt(value) == quiz.getQuestion().keyId)
    {
        document.getElementById("choice" + quiz.getQuestion().keyId).style.backgroundColor = "#3BF500";
        document.getElementById("choice" + value).style.backgroundColor = "#3BF500";
        quiz.questionAnswered++;
        quiz.correctAnswer++;
        for (var i = 0; i < 4; i++)
            document.getElementById("choice" + i).disabled = true;
    }
    else
    {
        document.getElementById("choice" + quiz.getQuestion().keyId).style.backgroundColor = "#3BF500";
        document.getElementById("choice" + parseInt(value)).style.backgroundColor = "red";
        quiz.questionAnswered++;
        for (var i = 0; i < 4; i++)
            document.getElementById("choice" + i).disabled = true;
    }
}

getStarted(quiz);

Answer 1

您没有将任何事件绑定到下一个按钮，将其添加到您的 JS 代码中

document.getElementById('next').addEventListener("click", function() {
  quiz.questionIndex++;
  setQuestion(quiz);
});