我现在正在学习JavaScript，我正在创建一个测试。我的测试运行正常，控制台中没有任何错误，但它会跳过问题，有时会在所有问题都得到回答之前结束测试。即使给出了正确的答案，它也会缩短时间。
我真的不确定它为什么这么做，因为在我看来它的编码是正确的。考虑到我在这里寻求帮助意味着这显然是不正确的。如果有人能帮我调整代码，使其正常工作，我将不胜感激！
var quizButton = document.querySelector("#quiz-button")
var timer = 75
var quizTimer = document.querySelector("#quiz-timer")
var questionIndex = 0
var score = 0
var questionBoxElement = document.querySelector('#question-box')
var questions = [
// add questions here!!
// question 1
{
questionText: "This is question 1",
options: ["a. answer", "b. correct", "c. answer", "d. answer"],
answer: "b. correct"
},
// question 2
{
questionText: "this is question 2",
options: ["a. correct", "b. answer", "c. answer", "d. answer"],
answer: "a. correct"
},
// question 3
{
questionText: "This is question 3",
options: ["a. answer", "b. answer", "c. answer", "d. correct"],
answer: "d. correct"
},
// question 4
{
questionText: "this is question 4",
options: ["a. answer", "b. answer", "c. correct", "d. answer"],
answer: "c. correct"
},
// question 5
{
questionText: "this is question 5",
options: ["a. answer", "b. answer", "c. correct", "d. answer"],
answer: "c. correct"
}
];
var answerBtn0 = document.querySelector("#option0");
var answerBtn1 = document.querySelector("#option1");
var answerBtn2 = document.querySelector("#option2");
var answerBtn3 = document.querySelector("#option3");
var answers = [answerBtn0, answerBtn1, answerBtn2, answerBtn3]
// display questions
function displayQuestion() {
let question = questions[questionIndex];
let answerOptions = question.options;
let questionEl = document.querySelector("#question");
questionEl.textContent = question.questionText;
for (var i = 0; i < answerOptions.length; i++) {
let answerChoices = answerOptions[i];
let answerBtn = answers[i];
answerBtn.textContent = answerChoices;
}
document.querySelector("#answer-buttons").addEventListener("click", checkAnswer);
// check for correct answer
function correctAnswer(answerBtn) {
return answerBtn.textContent === question.answer;
}
// checkif answeris correct
function checkAnswer(event) {
let answerBtn = event.target;
// correct answer
if (correctAnswer(answerBtn)) {
score = score + 20;
}
// incorrect answer
else {
if (timer > 10) {
timer = timer - 10;
} else {
timer = 0;
endQuiz();
}
}
questionIndex++;
// if no more questions, end quiz
if (questionIndex < questions.length) {
displayQuestion();
} else {
endQuiz();
}
}
function endQuiz() {
let finalScore = document.querySelector("#scores")
finalScore.textContent = "You scored " + score + "! Great Job!";
}
}
// timer countdown
function countdown() {
var timeLeft = setInterval(() => {
if (timer >= 0 || questionIndex < 5) {
quizTimer.textContent = timer + " seconds left";
timer--;
//questionIndex ++;
} else {
clearInterval(timeLeft);
// call game over function
}
}, 1000);
}
//Start function
function startQuiz() {
var startQuizIntro = document.querySelector(".start-quiz-intro")
startQuizIntro.setAttribute("class", "hide")
questionBoxElement.classList.remove("hide")
console.log(questionBoxElement);
// reset timer and score
userScore = 0;
countdown();
displayQuestion();
}
// One Line to call one function
quizButton.addEventListener("click", startQuiz);<div id="quiz-timer"></div>
<header class="start-quiz-intro">
<div class="quiz">
<h2>Coding Quiz</h2>
</div>
<div class="center-button">
<p class="start"> Press Button To Start The Quiz</p>
<button id="quiz-button">Start</button>
</div>
</header>
<div class="hero">
<div id="question-box" class="hide">
<h2 id="question"></h2>
<div id="answer-buttons" class="btn-grid">
<button id="option0" class="btn"></button>
<button id="option1" class="btn"></button>
<button id="option2" class="btn"></button>
<button id="option3" class="btn"></button>
</div>
<h3 id="scores"></h3>
</div>
</div>
<footer>
Thanks for playing my game - Reid
</footer>的几个问题
I区分大小写- 您多次添加eventListener-通过将函数移到displayQuestion之外来修复
var quizButton = document.querySelector("#quiz-button")
var timer = 75
var quizTimer = document.querySelector("#quiz-timer")
var questionIndex = 0
var score = 0
var questionBoxElement = document.querySelector('#question-box')
// check for correct answer
function correctAnswer(answerBtn, question) {
return answerBtn.textContent === question.answer;
}
// checkif answeris correct
function checkAnswer(event) {
let answerBtn = event.target;
// correct answer
let question = questions[questionIndex];
if (correctAnswer(answerBtn, question)) {
score = score + 20;
}
// incorrect answer
else {
if (timer > 10) {
timer = timer - 10;
} else {
timer = 0;
endQuiz();
}
}
questionIndex++;
// if no more questions, end quiz
if (questionIndex < questions.length) {
displayQuestion();
} else {
endQuiz();
}
}
function endQuiz() {
let finalScore = document.querySelector("#scores")
finalScore.textContent = "You scored " + score + "! Great Job!";
}
var questions = [
// add questions here!!
// question 1
{
questionText: "This is question 1",
options: ["a. answer", "b. correct", "c. answer", "d. answer"],
answer: "b. correct"
},
// question 2
{
questionText: "this is question 2",
options: ["a. correct", "b. answer", "c. answer", "d. answer"],
answer: "a. correct"
},
// question 3
{
questionText: "This is question 3",
options: ["a. answer", "b. answer", "c. answer", "d. correct"],
answer: "d. correct"
},
// question 4
{
questionText: "this is question 4",
options: ["a. answer", "b. answer", "c. correct", "d. answer"],
answer: "c. correct"
},
// question 5
{
questionText: "this is question 5",
options: ["a. answer", "b. answer", "c. correct", "d. answer"],
answer: "c. correct"
}
];
var answerBtn0 = document.querySelector("#option0");
var answerBtn1 = document.querySelector("#option1");
var answerBtn2 = document.querySelector("#option2");
var answerBtn3 = document.querySelector("#option3");
var answers = [answerBtn0, answerBtn1, answerBtn2, answerBtn3]
// display questions
function displayQuestion() {
console.log(questionIndex)
let question = questions[questionIndex];
let answerOptions = question.options;
let questionEl = document.querySelector("#question");
questionEl.textContent = question.questionText;
for (var i = 0; i < answerOptions.length; i++) {
let answerChoices = answerOptions[i];
let answerBtn = answers[i];
answerBtn.textContent = answerChoices;
}
}
// timer countdown
function countdown() {
var timeLeft = setInterval(() => {
if (timer >= 0 || questionIndex < 5) {
quizTimer.textContent = timer + " seconds left";
timer--;
//questionIndex ++;
} else {
clearInterval(timeLeft);
// call game over function
}
}, 1000);
}
//Start function
function startQuiz() {
var startQuizIntro = document.querySelector(".start-quiz-intro")
startQuizIntro.setAttribute("class", "hide")
questionBoxElement.classList.remove("hide")
console.log(questionBoxElement);
// reset timer and score
userScore = 0;
countdown();
displayQuestion();
}
// One Line to call one function
quizButton.addEventListener("click", startQuiz);
document.querySelector("#answer-buttons").addEventListener("click", checkAnswer);<div id="quiz-timer"></div>
<header class="start-quiz-intro">
<div class="quiz">
<h2>Coding Quiz</h2>
</div>
<div class="center-button">
<p class="start"> Press Button To Start The Quiz</p>
<button id="quiz-button">Start</button>
</div>
</header>
<div class="hero">
<div id="question-box" class="hide">
<h2 id="question"></h2>
<div id="answer-buttons" class="btn-grid">
<button id="option0" class="btn"></button>
<button id="option1" class="btn"></button>
<button id="option2" class="btn"></button>
<button id="option3" class="btn"></button>
</div>
<h3 id="scores"></h3>
</div>
</div>
<footer>
Thanks for playing my game - Reid
</footer>