I have a web based quiz that loads a new question, with 4 choices and their respective radio buttons next to them. The problem is I have an event listener on the "next" button that triggers a new question and choices be loaded, except that the questions do not load. I believe it is because the step counter I have resets each time. Also something weird is that I have it output to console when the event listener fires, and sometimes when I press next it doesn't fire, and other times it does. I can't find a pattern.
I have included the relevant code with a link to JSFiddle if you want to see all of it. Thank you in advance. http://jsfiddle.net/d0u6cz7o/
function Quiz() {
this.step = 0;
this.questionSwap = function () {
document.getElementById('question').innerHTML = allQuestions[this.step].question;
document.getElementById('answer0').innerHTML = allQuestions[this.step].choices[0];
document.getElementById('answer1').innerHTML = allQuestions[this.step].choices[1];
document.getElementById('answer2').innerHTML = allQuestions[this.step].choices[2];
document.getElementById('answer3').innerHTML = allQuestions[this.step].choices[3];
};
var quiz = new Quiz();
quiz.questionSwap();
window.addEventListener('load', function() {
document.getElementById("next").addEventListener("click", function () {
console.log("Here");
quiz.questionSwap();
quiz.step++;
console.log("current question is " + quiz.step);
})
});
Change the submit into a button, remove the listener & change the order of the rotation:
<input id="next" type="button" value="Next!">
document.getElementById("next").addEventListener("click", function ()
{
quiz.step++;
quiz.questionSwap();
console.log("current question is " + quiz.step);
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.