Currently, I am immersed in a Quiz project and am looking to progress to the next question. However, I have encountered an issue with the getElementById() function:
Uncaught TypeError: Cannot set property 'innerHTML' of null :
document.getElementById("questionNum").innerHTML = "Question " + (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>
This is my js code used for checking answers and navigating through questions.
var questions = [
new Question("HyperText Markup Language Stands 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 to 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);