我正在尝试使用 javascript 构建一个简单的测验应用程序，一切顺利，但在验证时发生了一些奇怪的事情，它验证了我的代码两次!一次是上一个问题的正确答案，另一次是当前问题的正确答案! 任何人都可以检查我的代码吗？找到错误在哪里？非常感谢
(function () {
// Question Function Constructor
const Question = function (question, answers, correct) {
this.question = question;
this.answers = answers;
this.correct = correct;
}
// Questions Prototypes
Question.prototype.displayQuestion = function () {
// getting html elements
const qHolder = $('#question').get(0);
const list = $('#listOfAnswers').get(0);
// show questions
$(qHolder).empty();
$(qHolder).append(this.question);
// show answers
this.answers.forEach(answer => {
let li = ` <li>
<label for="${answer}">
<input class="option" type="radio" name="answer" value="${answer}" id="${answer}"> ${answer}
</label>
</li>`;
$(list).append(li);
});
}
Question.prototype.validate = function (ans, callback) {
let score;
if (ans === this.correct) {
console.log('**** TRUE ****');
score = callback(true);
console.log(`YOURE ANSWERE === ${ans}`);
} else {
console.log('---- FALSE ----');
score = callback(false);
console.log(`YOURE ANSWERE === ${ans}`);
console.log(`CORRECT ANSWER IS =====> ${this.correct}`);
}
this.displayScore(score);
}
Question.prototype.displayScore = function (score) {
console.log(`your current score is : ${score}`);
console.log(`=======================================================`);
}
// instance of Questions
const q1 = new Question('what\'s max\'s name?', [
'lax',
'max',
'wax',
'pax',
], 1);
const q2 = new Question('2+2?', [
'4',
'12',
'99',
'none',
], 0);
const q3 = new Question('... jobs?!', [
'andrew',
'what?!',
'why?!',
'steve',
], 3);
const q4 = new Question('which one is not a programming language?', [
'javascript',
'python',
'apple',
'c#',
], 2);
// Array of Questions
const Questions = [q1, q2, q3, q4];
// console.log(Questions);
function score() {
let sc = 0;
return function (correct) {
if (correct) {
sc++;
}
return sc;
}
}
let keepScore = score();
function nextQuestion() {
// getting the list and emptying the it for new list items
const list = $('#listOfAnswers');
$(list).empty();
// alerting in the console that its a new question
console.log('A NEW QUESTION');
//generate a random number
let n = Math.floor(Math.random() * Questions.length);
console.log(`random number generated --> ${n}`);
// display the question
Questions[n].displayQuestion();
console.log(`answer to the question ==>${Questions[n].correct}`);
// validating the answer by click on the submit button
const submitBtn = $('#submitBtn');
submitBtn.on('click', function (e) {
e.preventDefault();
let options = $('.option');
for (i = 0; i < options.length; i++) {
const option = options[i];
if ($(option).is(':checked')) {
// console.log(option);
userAnswerIndex = i;
// validation
Questions[n].validate(userAnswerIndex, keepScore);
}
}
})
}
// displaying next question by clicking next
const nextQbtn = document.querySelector('#next');
nextQbtn.addEventListener('click', nextQuestion);
nextQuestion();
})();
这是我的 HTML 标记，再次感谢 --->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/style.css">
<title>Quiz App</title>
</head>
<body dir="rtl">
<header>
<h3>welcome to the quiz app</h3>
</header>
<div class="container">
<div id="card">
<header>
<p id="question">
<!-- Question displays here -->
</p>
</header>
<form id="answers">
<ol id="listOfAnswers">
<!-- answers will generate here -->
</ol>
</form>
<button type="submit" id="submitBtn">submit</button>
<button id="next">next!</button>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="/quiz.js"></script>
</body>
</html>
最佳答案
我无法确定运行代码，因为我没有相关标记，但从阅读来看，问题似乎出在这段代码中
submitBtn.on('click', function (e) {
e.preventDefault();
let options = $('.option');
for (i = 0; i < options.length; i++) {
const option = options[i];
if ($(option).is(':checked')) {
// console.log(option);
userAnswerIndex = i;
// validation
Questions[n].validate(userAnswerIndex, keepScore);
}
}
})
让我们再次转到第三行 let options = $('.option');，因为我没有标记，所以我可能是错的，但这看起来有点可疑。您正在选择具有类 option 的所有元素，然后迭代它们。在每次迭代中，您检查选项是否被选中，如果是，您验证它。
现在只有当 $('.option') 包含一个选定元素时，您才能确认验证将只运行一次。但是，如果您有多个带有 option 类的选择或输入元素，并且用户选择了其中的多个元素，您可能会获得多个选定元素。在那种情况下，您可能会看到问题被验证了不止一次
关于javascript - 面向对象的测验应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50018231/