JavaScript答题错误时计时器扣10秒的功能实现问题求助

核心问题 #

你的代码存在两个关键问题：

1. 错误扣分逻辑时机错误：把答错扣分的判断放在了计时器的每秒回调中，这会导致每秒都执行一次扣分判断，而不是用户点击错误选项时才触发。
2. selectedOption 未正确绑定点击事件：如果没有在用户点击选项时给 selectedOption 赋值，判断条件 currentQuestion.answer !== selectedOption 永远不会正确触发。

另外，移除初始的 secondsLeft-- 和 time.textContent = secondsLeft 后计时器无法显示，是因为这两行是每秒更新时间显示的核心逻辑，删掉后计时器自然不会更新数值。

修改后的代码实现 #

1. 处理选项点击逻辑（绑定扣分触发时机）

// 假设你的选项元素带有统一类名（比如.option），批量绑定点击事件
document.querySelectorAll('.option').forEach(option => {
  option.addEventListener('click', function() {
    // 赋值当前选中的选项（根据你的实际DOM结构调整取值方式）
    selectedOption = this.textContent.trim();
    
    // 判断是否答错，触发扣分
    if (currentQuestion.answer !== selectedOption) {
      secondsLeft -= 10;
      // 防止时间变为负数
      if (secondsLeft < 0) secondsLeft = 0;
      // 更新时间显示
      time.textContent = secondsLeft;
      
      // 如果扣分后时间归0，直接结束测验
      if (secondsLeft === 0) {
        clearInterval(timerInterval);
        endQuiz();
      }
    }
    
    // 这里添加切换到下一题的逻辑（根据你的需求实现）
    nextQuestion();
  });
});

2. 优化计时器函数

// 把timerInterval声明在外层作用域，方便在其他地方清除
let timerInterval;

function setTime() {
  timerInterval = setInterval(function () {
    secondsLeft--;
    // 兜底处理时间负数
    if (secondsLeft < 0) secondsLeft = 0;
    // 更新时间显示
    time.textContent = secondsLeft;

    // 时间归0时结束测验
    if (secondsLeft === 0) {
      clearInterval(timerInterval);
      endQuiz();
    }
  }, 1000);
}

startButton.addEventListener("click", setTime);

关键修改说明 #

• 分离逻辑：把答错扣分的逻辑从计时器回调中移出，放到选项的点击事件里，确保只有用户主动选择错误选项时才扣10秒。
• 作用域调整：将 timerInterval 提升到外层作用域，这样在扣分后时间归0时，可以直接清除计时器并结束测验。
• 边界处理：添加了时间负数的判断，避免显示不合理的负数值。
• 赋值时机：确保 selectedOption 在用户点击选项时被正确赋值，让答错判断的条件能够生效。

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