JavaScript测验未验证答案

时间：2018-09-19 22:10:23

标签： javascript html

我正在研究Javascript乘法测验。这是我相关的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>

很多，但它适用于零。它会验证每个答案并在答案正确时提供绿色复选标记，在答案不正确时提供红色复选标记。但是，当我添加更多数字时，它将不起作用。这是代码的代码（下一个数字）：

// 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 += "&#9989;";
    inputAnsOne.shift();
    if (!inputAnsOne.length) {
      console.log("All answers provided!");
    }
  } else {
    document.getElementById("incorrectAnswers").innerHTML += "&#10060;";
  }
  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();
  }
});

如果您正确地获得了所有答案，则此代码有效，但是如果您错过了一个答案，则无论输入内容如何，​​它都会对所有错误进行计数。这是Codepen：link here

我已经尝试了所有事情-我想做的是，当您单击“ ones”按钮时，该功能可以使这些问题出现并验证。我试图循环这些函数，但无法根据用户输入（据我所知）重命名数组，因此无法正常工作。我尝试了一个开关，但是没有用。我是否缺少某些东西？还是应该以一种完全不同的方式来解决这个问题？感谢您的帮助！

2 个答案:

答案 0 :(得分：0)

使用新的监听器调用addEventListener不会删除旧的监听器。如果您致电

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

多次，当您单击所有监听器的 all 按钮时，每个监听器都在寻找不同的答案。

您不应使用多个侦听器，而应使用单个侦听器来检查全局变量，以查看当前问题的答案是否正确。

// 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 += "&#9989;";
  } else {
    document.getElementById("incorrectAnswers").innerHTML += "&#10060;";
  }
  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>

答案 1 :(得分：0)

// 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 += "&#9989;";
    inputAns.shift();
    if (!inputAns.length) {
      console.log("All answers provided!");
    }
  } else {
    document.getElementById("incorrectAnswers").innerHTML += "&#10060;";
  }
  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 += "&#9989;";
inputAnsOne.shift();
if (!inputAnsOne.length) {
 console.log("All answers provided!");
}
} else {
document.getElementById("incorrectAnswers").innerHTML += "&#10060;";
}
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();
  });

只需在底部添加此代码块并更改$（'＃nextBtnOne'）。remove（）;到$（'＃nextBtnOne'）。hide（）; 

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

我认为一切都从那里开始。

让我知道是否仍然存在问题。

相关问题
最新问题