事件侦听器无法始终如一地运行Javascript

Question

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

    })
});

Answer 1

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

})

http://jsfiddle.net/d0u6cz7o/4/