Блог

Я работаю над проектом викторины. Я хочу перейти к следующему вопросу.
Но у меня возникла проблема с getElementById() проблема:
Ошибка неперехваченного типа: не удается установить для свойства ‘innerHTML’ значение null:
document.getElementById(«questionNum»).innerHTML = «Вопрос » (quiz.questionIndex 1);

 <!-- 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);
 

Вы не привязываете какое-либо событие к следующей кнопке, добавьте это в свой JS-код

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