I created a small quiz app to practice my JS skills. Everything seems to be working fine, except for one issue - when I click on replay, the quiz box shows up but the 'Next' button stops functioning. There are no console errors and I'm struggling to pinpoint the problem in the code.
If you want to check out the working app, here is the jsFiddle link: https://jsfiddle.net/lifet/t20h6gw8/10/
The JavaScript file contains both the script and the questions for the quiz. Below is the HTML markup for the quiz and result box:
<!--Start Quiz Box-->
<div class="row quiz_box">
<div class="col-md-6 col-sm-12">
<div class="card">
//other sections of code
<footer>
<button class="next_btn">Next</button>
</footer>
</div>
</div>
</div>
</div>
<!--End Quiz Box-->
<!--Start Result Box-->
<div class="row result_box">
<div class="card col-md-6 col-sm-12">
//other sections of code
<div class="buttons">
<button class="restart"&qt;Replay Quiz</button>
</div>
</div>
</div>
<!--End Result Box-->
</div>
Here is the CSS used to hide or show the result and quiz box accordingly:
.removeResultBox.result_box{
display: none;
}
.removeResultBox.quiz_box{
display: flex;
}
This is the JavaScript function for the replay option and next button click event:
//---------------- restart Quiz-------------------//
const replayQuiz = resultBox.querySelector(".restart");
function showQuizBox(){}
replayQuiz.onclick=() =>{
quizBox.classList.add("removeResultBox");// this displays the quiz box
resultBox.classList.add("removeResultBox");// this hides the result box
queCounter = 0;
queNumber = 1;
startTime = 15;
widthValue = 0;
userScore =0;
showQuestions(queCounter);
questionCounter(queNumber);
clearInterval(timeCounter);
clearInterval(counterLine);
startTimer(startTime);
startTimeLine(widthValue);
nextBtn.style.display="none";
}
And finally, the onclick event for the next button:
//go on to the next question
nextBtn.onclick=()=>{
console.log("next");
if (queCounter < questions.length - 1) {
queCounter++;
queNumber++;
showQuestions(queCounter);
questionCounter(queNumber);
clearInterval(timeCounter);
startTimer(startTime);
clearInterval(counterLine);
startTimeLine(widthValue)
nextBtn.style.display="none";
}
else {
showResultBox();
}
}
If anyone can offer assistance with this issue, I would greatly appreciate it. Thank you!