JavaScript 实现按当前题目索引将单选答案存入数组指定位置

原实现存在3个和需求不匹配的硬伤：

• 答案采集时机错误：在点击「下一题」时才全量遍历所有单选框取值，既会把隐藏题目的选中值一并抓取，又用push追加到数组尾部，完全无法和当前题的序号索引对应
• 存在未定义变量引用：nextBtn点击事件里的prevCount没有提前声明，触发点击时会直接抛出运行时错误
• 切题无状态回显：用户返回上一题时，之前选中的选项不会自动恢复选中状态，和已存的答案数据脱节

• 第一步：初始化答案数组时直接对齐题目总长度，避免索引错位
  把原来的let savedAns = []改成：

  const total = quizes.length;
  // 提前按题目数量初始化数组，每个位置默认存空值
  let savedAns = new Array(total).fill(null);
  

• 第二步：把答案采集逻辑从「点击下一题」迁移到「用户选中单选框的瞬间」，直接按当前count对应的索引存值，替换原代码里那段循环遍历radios、push值的逻辑：

  // 给所有单选框绑定选中事件
  radios.forEach(radio => {
    radio.addEventListener('change', function() {
      // 直接把选中值存在和当前题序号匹配的索引位置
      savedAns[count] = this.value;
    })
  })
  

• 第三步：删掉下一题点击事件里多余的逻辑，去掉未定义的prevCount引用，改造后的下一题点击逻辑：

  nextBtn.addEventListener('click', function() {
    if (count >= total - 1) {
      alert('no more questions left')
      return
    }
    count++;
    hide();
    quizes[count].style.display = 'block'
    // 切题后回显当前题之前选中的答案
    echoSavedAnswer();
  })
  

• 第四步：补写切题时的答案回显逻辑，每次切换到对应题目时，把之前存的选中值同步到单选框状态：

  const echoSavedAnswer = function() {
    const currentSaved = savedAns[count];
    if (!currentSaved) return;
    // 只取当前展示题目下的单选框做状态匹配
    const currentQuizRadios = quizes[count].querySelectorAll('input[name="answer"]');
    currentQuizRadios.forEach(radio => {
      radio.checked = radio.value === currentSaved;
    })
  }
  

• 第五步：改造上一题的点击逻辑，同样在切题后触发答案回显：

  prevBtn.addEventListener('click', function() {
    if (count <= 0) {
      alert('no more previous questions')
      return
    }
    count--;
    hide();
    quizes[count].style.display = 'block'
    echoSavedAnswer();
  })
  

• 不要用push方法往数组尾部追加答案，直接用数组[题序号] = 值的索引赋值方式，不管用户来回切多少次题目，答案位置永远和题目序号一一对应，不会重复、不会错位
• 遍历时不要全量抓取所有单选框的状态，每次只取当前展示题目对应的DOM节点做状态读取，避免把隐藏题的选中值误存进去
• 如果用户修改某道题的选项，代码会直接覆盖对应索引位置的旧值，不需要额外做去重判断

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