如何修复 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";}

? 其他关键优化建议：

1. dataset.correct 一致性：在 selectAnswer 中判断 selectedBtn.dataset.correct === "true" 是合理的，但务必确保所有正确按钮都设置了 button.dataset.correct = "true"（注意是字符串 "true"，不是布尔值 true）。原代码中仅对 answer.correct === true 的按钮赋值，这点正确，但需避免遗漏。
2. 按钮禁用逻辑增强：当前 button.disabled = true 在 selectAnswer 中应用，但若用户快速连点可能引发重复计分。建议在 selectAnswer 开头添加防重触发保护：

   if (selectedBtn.disabled) return;selectedBtn.disabled = true;

3. handleNextButton 逻辑复用：你已在 nextButton 的 click 事件中做了 currentQuestionIndex < questions.length 判断，因此 handleNextButton 内无需重复该判断，保持职责清晰即可。

最后验证流程：答完第 2 题 → 点击 Next → currentQuestionIndex 变为 2 → 2 < 2 为 false → 进入 else 分支 → 调用 showScore() → 清空选项区、更新题目区域为分数、显示“Redo”按钮 ✅

总结：作用域问题是前端开发中最隐蔽也最常被忽视的陷阱之一。将工具型函数（如 resetState、hideAllButtons 等）统一声明在顶层作用域，不仅解决当前 Bug，也显著提升代码可维护性与可测试性。