如何修复 Quiz 应用中最终得分不显示的问题-html教程-PHP中文网

如何修复 Quiz 应用中最终得分不显示的问题

本文详解为何 showScore() 未被正确调用，并指出核心原因是 resetState() 被错误地定义在 showQuestion() 内部导致作用域失效，进而使 showScore() 中的 resetState() 调用失败。

本文详解为何 `showscore()` 未被正确调用，并指出核心原因是 `resetstate()` 被错误地定义在 `showquestion()` 内部导致作用域失效，进而使 `showscore()` 中的 `resetstate()` 调用失败。

在你的 Quiz 应用中，showScore() 函数本应在所有题目答完后显示最终得分（例如 “You scored 2 out of 2!”），但实际页面始终停留在最后一题，得分从未出现——根本原因在于：resetState() 函数被定义在 showQuestion() 内部，属于局部作用域，无法被 showScore() 访问。

查看原始代码：

function showQuestion() {
  resetState(); // ✅ 此处可调用

  // ...其余逻辑...

  function resetState() { // ❌ 局部函数！仅 showQuestion 内可见
    nextButton.style.display = "none";
    while (answerButtons.firstChild) {
      answerButtons.removeChild(answerButtons.firstChild);
    }
  }
}

由于 resetState 是 showQuestion 的嵌套函数，它对外部函数（包括 showScore）完全不可见。因此当 showScore() 执行 resetState() 时，浏览器会抛出 ReferenceError: resetState is not defined（控制台可见），整个函数执行中断，后续 DOM 更新（如设置 questionElement.innerHTML）也就不会发生。

✅ 正确做法：将 resetState 提升为全局作用域下的独立函数：

// ✅ 移到顶层作用域，与其它函数平级
function resetState() {
  nextButton.style.display = "none";
  while (answerButtons.firstChild) {
    answerButtons.removeChild(answerButtons.firstChild);
  }
}

function showQuestion() {
  resetState(); // ✅ 现在可在任意地方调用

  let currentQuestion = questions[currentQuestionIndex];
  let questionNo = currentQuestionIndex + 1;
  questionElement.innerHTML = questionNo + ". " + currentQuestion.question;

  currentQuestion.answers.forEach(answer => {
    const button = document.createElement("button");
    button.innerHTML = answer.text;
    button.classList.add("btn");
    if (answer.correct) {
      button.dataset.correct = "true"; // 建议显式设字符串，避免隐式转换问题
    }
    answerButtons.appendChild(button);
    button.addEventListener("click", selectAnswer);
  });
}

function showScore() {
  resetState(); // ✅ 现在可正常执行
  questionElement.innerHTML = `You scored ${score} out of ${questions.length}!`;
  nextButton.innerHTML = "Redo the test";
  nextButton.style.display = "block";
}

? 其他关键优化建议：

dataset.correct 一致性：在 selectAnswer 中判断 selectedBtn.dataset.correct === "true" 是合理的，但务必确保所有正确按钮都设置了 button.dataset.correct = "true"（注意是字符串 "true"，不是布尔值 true）。原代码中仅对 answer.correct === true 的按钮赋值，这点正确，但需避免遗漏。
按钮禁用逻辑增强：当前 button.disabled = true 在 selectAnswer 中应用，但若用户快速连点可能引发重复计分。建议在 selectAnswer 开头添加防重触发保护：
```
if (selectedBtn.disabled) return;
selectedBtn.disabled = true;
```
handleNextButton 逻辑复用：你已在 nextButton 的 click 事件中做了 currentQuestionIndex 判断，因此 <code>handleNextButton 内无需重复该判断，保持职责清晰即可。