Javascript 测验不验证答案

我正在做一个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 += "&#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();
}
});

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

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

// 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();
}
});

如果您得到所有正确的答案，则此代码有效，但是如果您错过了一个答案，则无论输入如何，它都会计算错误后的所有答案。这是代码笔：链接在这里

我已经尝试了一切 - 我想发生的是，当您单击"一"按钮时，函数会起作用，使"一"问题出现并验证。我尝试循环函数，但无法根据用户输入(据我所知(重命名数组，因此不起作用。我尝试了一个开关，但没有用。我错过了什么还是应该以完全不同的方式去做？感谢您的任何帮助！

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

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

多次，当您单击按钮时，所有听众都会运行，并且每个听众都在寻找不同的答案。

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

// 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>

// 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();
});

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

如果还有问题，请告诉我。

相关内容

最新更新

热门标签：