HTML/CSS/JS开发在线答题游戏：如何编写答题校验并加载新题的函数？

• 函数调用语法错误
  checkAnswers函数中调用resetPage时既没有加执行括号，也没有传入目标元素参数，该行代码完全未生效，需要修改为resetPage(element)。
• dataset类型匹配错误
  HTML元素的dataset属性存储的所有值都是字符串类型，你用correct === true做全等判断永远返回false，需要修改为correct === 'true'。
• 冗余无效代码
  selectAnswer函数中checkAnswers(document.newButton, correct)属于无效调用，document.newButton不是合法的DOM元素引用，直接删除该行即可。
• 缺少核心业务逻辑
  仅实现了答案正确性的样式标记，没有实现加载新题目的关联逻辑：没有给提交按钮绑定点击事件，没有更新当前题目索引currentQuestionIndex，也没有调用题目渲染函数触发新题加载。
• 缺少交互限制逻辑
  答案校验完成后没有禁用所有答案按钮，用户可重复点击不同答案多次触发校验逻辑，建议在标记答案样式的同时给所有按钮添加disabled = true属性。
• 状态重置逻辑不合理
  当前只在单按钮校验时重置单个按钮的样式，应该在渲染每道新题前统一清空上一题的所有样式、按钮状态，避免状态残留。

修正后参考代码 #

function selectAnswer(e) {
    const selectedButton = e.target;
    const correct = selectedButton.dataset.correct;
    // 遍历所有答案按钮标记正确/错误样式，同时禁用按钮
    Array.from(answerButtonsElement.children).forEach(button => {
      checkAnswers(button, button.dataset.correct)
      button.disabled = true
    })
    if (shuffledQuestions.length > currentQuestionIndex + 1) {
      submitButtonElement.classList.remove('hide')
      // 绑定提交按钮加载下一题逻辑
      submitButtonElement.onclick = () => {
        currentQuestionIndex++
        renderQuestion() // 替换为你实际的渲染题目函数名
        submitButtonElement.classList.add('hide')
      }
    } else {
      startButton.innerText = 'Restart'
      startButton.classList.remove('hide')
    }
}

function checkAnswers(element, correct) {
    resetPage(element)
    if (correct === 'true') {
        element.classList.add('correct-btn');
    } else {
        element.classList.add('incorrect-btn');
    }
}

function resetPage(element) {
    element.classList.remove('correct-btn')
    element.classList.remove('incorrect-btn')
    element.disabled = false
}

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