Quiz应用技术问题：答完所有题目后分数无法显示？

我在测验结束时尝试显示分数，但答完所有题目后分数并未弹出。已经创建了showScore和handleNextButton函数，逻辑上应该在没有剩余题目时显示分数，推测遗漏了细节，求帮助。

错误分析 #

1. 作用域问题：resetState函数被定义在showQuestion函数内部，导致showScore调用时无法找到该函数，抛出ReferenceError，直接阻止分数展示代码执行。
2. 语法错误：selectAnswer函数中selectedBtn.classList.add("incorrect").style.display = "none";这行代码存在逻辑错误——classList.add()方法没有返回值，无法链式调用.style属性，会抛出TypeError，中断函数执行流程。

修复方案 #

1. 调整resetState作用域 #

将resetState函数移到全局作用域，让showQuestion和showScore都能正常调用。

2. 修正链式调用错误 #

将错误的链式调用拆分为独立的两行代码，或根据需求移除不必要的隐藏逻辑。

修复后的完整代码 #

HTML #

<div class="app">
  <h1>Quiz</h1>
  <div class="quiz">
    <h2 id="question">Question?</h2>
    <div id="answerButtons">
      <button class="btn">Answer 1</button>
      <button class="btn">Answer 2</button>
      <button class="btn">Answer 3</button>
      <button class="btn">Answer 4</button>
    </div>
    <button id="nextBtn">Next</button>
  </div>
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

body {
  background: #001e4d;
}

.app {
  background: #fff;
  width: 90%;
  margin: 100px auto 0;
  max-width: 600px;
  border-radius: 10px;
  padding: 30px;
}

.app h1 {
  font-size: 25px;
  color: #001e4d;
  font-weight: 600;
  border-bottom: 1px solid #333;
  padding-bottom: 30px;
}

.quiz {
  padding: 20px 0;
}

.quiz h2 {
  font-size: 18px;
  color: #001e4d;
  font-weight: 600;
}

.btn {
  background: #fff;
  color: #222;
  font-weight: 500;
  width: 100%;
  border: 1px solid #222;
  padding: 10px;
  margin: 10px 0;
  text-align: left;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover:not([disabled]) {
  background: #222;
  color: #fff;
}

.btn:disabled {
  cursor: no-drop;
}

#nextBtn {
  background: #001e4d;
  color: #fff;
  font-weight: 500;
  width: 150px;
  border: 0;
  padding: 10px;
  margin: 20px auto 0;
  border-radius: 4px;
  cursor: pointer;
  display: none;
}

.correct {
  background: #9aeabc;
}

.incorrect {
  background: #ff9393;
}

JavaScript #

const questions = [{
    question: "What is the first day of the work week?",
    answers: [{
        text: "Monday",
        correct: true
      },
      {
        text: "Friday",
        correct: false
      },
      {
        text: "Not sure",
        correct: false
      },
      {
        text: "Sunday",
        correct: false
      },
    ]
  },
  {
    question: "What is the last day of the work week?",
    answers: [{
        text: "Tuesday",
        correct: false
      },
      {
        text: "Sundays",
        correct: false
      },
      {
        text: "Fridays",
        correct: true
      },
      {
        text: "Wednesday",
        correct: false
      },
    ]
  }
];

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answerButtons");
const nextButton = document.getElementById("nextBtn");

let currentQuestionIndex = 0;
let score = 0;

// 移到全局作用域的resetState函数
function resetState() {
  nextButton.style.display = "none";
  while (answerButtons.firstChild) {
    answerButtons.removeChild(answerButtons.firstChild);
  }
}

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  nextButton.innerHTML = "Next";
  showQuestion();
}

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");
    answerButtons.appendChild(button);
    if (answer.correct) {
      button.dataset.correct = answer.correct;
    }
    button.addEventListener("click", selectAnswer);
  });
}

function selectAnswer(e) {
  const selectedBtn = e.target;
  const isCorrect = selectedBtn.dataset.correct === "true";
  if (isCorrect) {
    selectedBtn.classList.add("correct");
    score++;
  } else {
    // 修正链式调用错误，拆分为两行
    selectedBtn.classList.add("incorrect");
    // 如果不需要隐藏错误选项，可移除下面这行
    // selectedBtn.style.display = "none";
  }
  Array.from(answerButtons.children).forEach(button => {
    if (button.dataset.correct === "true") {
      button.classList.add("correct");
    }
    button.disabled = true;
  });
  nextButton.style.display = "block";
}

function showScore() {
  resetState();
  questionElement.innerHTML = `You scored ${score} out of ${questions.length}!`;
  nextButton.innerHTML = "Redo the test";
  nextButton.style.display = "block";
}

function handleNextButton() {
  currentQuestionIndex++;
  if (currentQuestionIndex < questions.length) {
    showQuestion();
  } else {
    showScore();
  }
}

nextButton.addEventListener("click", () => {
  if (currentQuestionIndex < questions.length) {
    handleNextButton();
  } else {
    startQuiz();
  }
});

startQuiz();

内容的提问来源于stack exchange，提问作者mhegz