JavaScript分页实现方法及测验Next按钮异常排查

从你描述的现象来看：回退到已答过的题目后，明明有选中答案，点击Next却仍要求重新选择，核心问题是Next按钮的启用状态没有和当前题目的答案选中状态实时同步，尤其是回退页面后没有重新检查状态。

问题根源 #

你第121行的btnNxt.onclick事件逻辑，大概率只在用户第一次选择答案时更新了按钮状态，但当用户回退到已答题目时，没有重新触发状态检查，导致按钮仍处于禁用状态，必须重新选一次才能激活。

具体修复方案 #

我整理了一套可靠的修改步骤：

1. 抽离通用的状态同步函数

把检查当前题目是否有选中答案、更新按钮状态的逻辑单独抽出来，方便重复调用：

function syncNextButtonState() {
  // 根据你的实际选项选择器修改，这里假设是name为"quiz-answer"的单选框
  const hasSelected = document.querySelector('input[name="quiz-answer"]:checked') !== null;
  const btnNxt = document.getElementById('btnNxt');
  // 同步按钮禁用状态
  btnNxt.disabled = !hasSelected;
}

2. 在关键场景调用该函数

需要在以下时机触发状态检查，确保按钮状态始终正确：

• 页面初始化加载第一题时
• 用户切换到任意题目（包括点击Prev回退）时
• 用户选中/取消选中答案时

示例代码：

// 页面加载完成后初始化状态
document.addEventListener('DOMContentLoaded', () => {
  syncNextButtonState();
});

// 监听答案选项的change事件，实时更新按钮状态
document.querySelectorAll('input[name="quiz-answer"]').forEach(input => {
  input.addEventListener('change', syncNextButtonState);
});

// 点击Prev回退题目后，立即同步当前题目的按钮状态
btnPrev.onclick = function() {
  // 执行你的回退逻辑：比如切换上一题DOM、恢复之前的选中状态
  goToPreviousQuestion();
  // 回退后同步按钮状态
  syncNextButtonState();
};

3. 修改Next按钮的点击逻辑

去掉依赖按钮disabled属性的判断，直接检查当前是否有选中答案，避免状态缓存的问题：

btnNxt.onclick = function() {
  // 直接检查当前是否有选中答案，比依赖按钮状态更可靠
  const selectedAnswer = document.querySelector('input[name="quiz-answer"]:checked');
  if (!selectedAnswer) {
    alert('请先选择答案哦！');
    return;
  }

  // 执行你的Next逻辑：保存当前答案、切换到下一题
  saveCurrentAnswer(selectedAnswer.value);
  goToNextQuestion();

  // 切换到下一题后，同步该题的按钮状态（如果用户之前答过，按钮会自动启用）
  syncNextButtonState();
};

这样修改后，不管是第一次答题还是回退到已答题目，Next按钮的状态都会实时和当前题目的答案选中情况同步，不会再出现已选答案却无法点击的问题。

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