Javascript Quiz Not Validating Answers

Question

I am working on a Javascript multiplication quiz. Here is my relevant HTML:

 // Start Button divs to hide and show // $('#zero').click(function() { $('#questions').show(); $('#qdiv').show(); $('.toDisappear').hide(); $('#correctAnswers').show(); $('#incorrectAnswers').show(); $('#nextBtnOne').remove(); }); // Zeros function // $('#zero').click(function(e) { document.getElementById('questions').innerHTML = '0 x 0'; $('#nextBtn').show(); $('#nextBtnOne').remove(); }); // Zeros testing information // let input = ['0 x 0', '1 x 0', '2 x 0', '3 x 0', '4 x 0', '5 x 0', '6 x 0', '7 x 0', '8 x 0', '9 x 0', '10 x 0', 'All Questions Asked!']; let inputAns = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]; let currentAnswer = inputAns[0]; document.getElementById('questions').innerHTML = input[0]; document.getElementById("nextBtn").addEventListener("click", function() { let answers = document.getElementById('answers').value; if (parseInt(answers) === currentAnswer) { document.getElementById("correctAnswers").innerHTML += "✅"; inputAns.shift(); if (!inputAns.length) { console.log("All answers provided!"); } } else { document.getElementById("incorrectAnswers").innerHTML += "❌"; } currentAnswer = inputAns[0]; }); let currentQuestion = input[1]; document.getElementById("nextBtn").addEventListener("click", function() { document.getElementById('questions').innerHTML = currentQuestion; input.shift(); currentQuestion = input[1]; }); document.getElementById("nextBtn").addEventListener("click", function() { if (currentQuestion === inputAns[12]) { $('#nextBtn').hide(); } }); // Clears input box after each question // document.getElementById('nextBtn').addEventListener("click", function() { document.getElementById('answers').value = ''; }); // Makes enter button work // document.getElementById('answers').addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById('nextBtn').click(); } }); 

 <div class="toDisappear"> <div class="main-div"> <h1>Multiplication Quiz</h1> <h2>What is your number?</h2> </div> <div class="instructions" id="instructions"> <p>You will be given three seconds to answer each fact. If you do not answer it, it will disappear and you will miss it. Are you ready?</p> <button type="submit" id="zero" value="zero">0's</button> <button type="submit" id="one" value="one">1's</button> </div> </div> <div class="qdiv" id="qdiv"> <div class="questions" id="questions"></div> <p><input type="text" name="answers" class="answers" id="answers"></p> <button type="submit" id="nextBtn" class="nextBtn">NEXT!</button> <button type="submit" id="nextBtnOne" class="nextBtnOne">NEXT!</button> </div> <div class="correctAnswers" id="correctAnswers"></div> <div class="incorrectAnswers" id="incorrectAnswers"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

It's a lot, but it works for the zero's. It validates each answer and provides a green check when the answer is correct, a red x when it's incorrect. However, when I add more numbers, it doesn't work. Here is the code for the ones (next number up):

 // Ones function // $('#one').click(function(e) { document.getElementById('questions').innerHTML = '0 x 1'; $('#nextBtnOne').show(); }); // Ones testing information // let inputOne = ['0 x 1', '1 x 1', '2 x 1', '3 x 1', '4 x 1', '5 x 1', '6 x 1', '7 x 1', '8 x 1', '9 x 1', '10 x 1', 'All Questions Asked!']; let inputAnsOne = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let currentAnswerOne = inputAnsOne[0]; document.getElementById('questions').innerHTML = inputOne[0]; document.getElementById("nextBtnOne").addEventListener("click", function() { let answersOne = document.getElementById('answers').value; if (parseInt(answersOne) === currentAnswerOne) { document.getElementById("correctAnswers").innerHTML += "✅"; inputAnsOne.shift(); if (!inputAnsOne.length) { console.log("All answers provided!"); } } else { document.getElementById("incorrectAnswers").innerHTML += "❌"; } currentAnswerOne = inputAnsOne[0]; }); let currentQuestionOne = inputOne[1]; document.getElementById("nextBtnOne").addEventListener("click", function() { document.getElementById('questions').innerHTML = currentQuestionOne; inputOne.shift(); currentQuestionOne = inputOne[1]; }); document.getElementById("nextBtnOne").addEventListener("click", function() { if (currentQuestionOne === inputAnsOne[12]) { $('#nextBtnOne').hide(); } }); // Clears input box after each question // document.getElementById('nextBtnOne').addEventListener("click", function() { document.getElementById('answers').value = ''; }); // Makes enter button work // document.getElementById('answers').addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { document.getElementById('nextBtnOne').click(); } }); 

This code works if you get all the answers right, but if you miss one, it counts all the ones after it wrong, no matter the input. Here is the Codepen: link here

I've tried everything - what I want to happen is that when you click the ones button, the functions work to make the ones questions appear and validate. I've tried to loop the functions but can't rename the arrays based on user input (from what I understand) and so that didn't work. I tried a switch and that didn't work. Am I missing something or should I be going about this in a totally different way? Thanks for any help!

Answer 1

Calling addEventListener with a new listener doesn't remove the old listener. If you call

document.getElementById("nextBtnOne").addEventListener("click", function() ...);

multiple times, when you click on the button all of the listeners run, and each of them is looking for a different answer.

Rather than adding multiple listeners, you should use a single listener that checks a global variable to see if the answer is correct for the current question.

 // Ones testing information // let inputOne = ['0 x 1', '1 x 1', '2 x 1', '3 x 1', '4 x 1', '5 x 1', '6 x 1', '7 x 1', '8 x 1', '9 x 1', '10 x 1', 'All Questions Asked!']; let inputAnsOne = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let currentIndex = 0; // Ones function // $('#one').click(function(e) { $('#questions').text(inputOne[currentIndex]); $('#nextBtnOne').show(); $('#nextBtn').hide(); }); $("#nextBtnOne").click(function() { if (parseInt($("#answers").val()) == inputAnsOne[currentIndex]) { document.getElementById("correctAnswers").innerHTML += "✅"; } else { document.getElementById("incorrectAnswers").innerHTML += "❌"; } currentIndex++; $("#answers").val(""); $('#questions').text(inputOne[currentIndex]); if (currentIndex >= inputAnsOne.length) { console.log("All answers provided!"); $("#nextBtnOne").hide(); } }); // Makes enter button work // document.getElementById('answers').addEventListener("keyup", function(event) { event.preventDefault(); if (event.keyCode === 13) { $('#nextBtnOne').click(); } }); 

 <div class="toDisappear"> <div class="main-div"> <h1>Multiplication Quiz</h1> <h2>What is your number?</h2> </div> <div class="instructions" id="instructions"> <p>You will be given three seconds to answer each fact. If you do not answer it, it will disappear and you will miss it. Are you ready?</p> <button type="submit" id="zero" value="zero">0's</button> <button type="submit" id="one" value="one">1's</button> </div> </div> <div class="qdiv" id="qdiv"> <div class="questions" id="questions"></div> <p><input type="text" name="answers" class="answers" id="answers"></p> <button type="submit" id="nextBtn" class="nextBtn">NEXT!</button> <button type="submit" id="nextBtnOne" class="nextBtnOne">NEXT!</button> </div> <div class="correctAnswers" id="correctAnswers"></div> <div class="incorrectAnswers" id="incorrectAnswers"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 2

// Zeros function //
$('#zero').click(function(e) {
  document.getElementById('questions').innerHTML = '0 x 0';
    $('#nextBtn').show();
    $('#nextBtnOne').remove();
});

     // Zeros testing information //
  let input = ['0 x 0', '1 x 0', '2 x 0', '3 x 0', '4 x 0', '5 x 0', '6 x 0', '7 x 0', '8 x 0', '9 x 0', '10 x 0', 'All Questions Asked!'];
  let inputAns = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  let currentAnswer = inputAns[0];
  document.getElementById('questions').innerHTML = input[0];

document.getElementById("nextBtn").addEventListener("click", function() {
  let answers = document.getElementById('answers').value;
  if (parseInt(answers) === currentAnswer) {
    document.getElementById("correctAnswers").innerHTML += "✅";
    inputAns.shift();
    if (!inputAns.length) {
      console.log("All answers provided!");
    }
  } else {
    document.getElementById("incorrectAnswers").innerHTML += "❌";
  }
  currentAnswer = inputAns[0];
});

  let currentQuestion = input[1];
  document.getElementById("nextBtn").addEventListener("click", function() {
  document.getElementById('questions').innerHTML = currentQuestion;
  input.shift();
currentQuestion = input[1];
  });

document.getElementById("nextBtn").addEventListener("click", function() {
 if (currentQuestion === inputAns[12]) {
     $('#nextBtn').hide();
 }
});

// Clears input box after each question //
document.getElementById('nextBtn').addEventListener("click", function() {
    document.getElementById('answers').value = '';
});

// Makes enter button work //
document.getElementById('answers').addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById('nextBtn').click();
    }
});

// Ones function //
$('#one').click(function(e) {
  document.getElementById('questions').innerHTML = '0 x 1';
    $('#nextBtnOne').show();
    $('#nextBtn').hide();
});

// Ones testing information //
let inputOne = ['0 x 1', '1 x 1', '2 x 1', '3 x 1', '4 x 1', '5 x 1', '6 x 1', '7 x 1', '8 x 1', '9 x 1', '10 x 1', 'All Questions Asked!'];
let inputAnsOne = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let currentAnswerOne = inputAnsOne[0];
console.log("currentAnswerOne is" + currentAnswerOne);
document.getElementById('questions').innerHTML = inputOne[0];

document.getElementById("nextBtnOne").addEventListener("click", function() {
let answersOne = document.getElementById('answers').value;
if (parseInt(answersOne) === currentAnswerOne) {
document.getElementById("correctAnswers").innerHTML += "✅";
inputAnsOne.shift();
if (!inputAnsOne.length) {
 console.log("All answers provided!");
}
} else {
document.getElementById("incorrectAnswers").innerHTML += "❌";
}
currentAnswerOne = inputAnsOne[0];
});

let currentQuestionOne = inputOne[1];
document.getElementById("nextBtnOne").addEventListener("click", function() {
document.getElementById('questions').innerHTML = currentQuestionOne;
inputOne.shift();
currentQuestionOne = inputOne[1];
});

document.getElementById("nextBtnOne").addEventListener("click", function() {
if (currentQuestionOne === inputAnsOne[12]) {
$('#nextBtnOne').hide();
}
});

// Clears input box after each question //
document.getElementById('nextBtnOne').addEventListener("click", function() {
document.getElementById('answers').value = '';
});

// Makes enter button work //
document.getElementById('answers').addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
   document.getElementById('nextBtnOne').click();
}
});



// Information relevant to all numbers //

// Start Button divs to hide and show //
$('#zero').click(function() {
  $('#questions').show();
  $('#qdiv').show();
  $('.toDisappear').hide();
  $('#correctAnswers').show();
  $('#incorrectAnswers').show();
  $('#nextBtnOne').hide();
});

$('#one').click(function() {
  $('#questions').show();
  $('#qdiv').show();
  $('.toDisappear').hide();
  $('#correctAnswers').show();
  $('#incorrectAnswers').show();
  $('#nextBtnOne').show();
  });

Just added this block of code at the bottom and changed $('#nextBtnOne').remove(); to $('#nextBtnOne').hide();

$('#one').click(function() {
  $('#questions').show();
  $('#qdiv').show();
  $('.toDisappear').hide();
  $('#correctAnswers').show();
  $('#incorrectAnswers').show();
  $('#nextBtnOne').show();
  });

I think everything worked from there.

Let me know if there's still problems.