如何用JavaScript验证问答游戏答案？Flask项目异常排查

一、点击一次弹出多个提示框的原因及解决 #

• 事件重复绑定：每次加载新题目时，都给按钮绑定了click事件，但没移除之前的绑定，导致点击一次触发多次验证逻辑。
  解决：每次绑定事件前，先清空按钮容器的内容（比如用innerHTML = ''），再重新生成按钮并绑定事件；或者使用事件委托，把事件绑定在父容器上，避免重复绑定。
• 冗余按钮未清理：每次加载题目时都新增了按钮元素，旧按钮没被删除，页面上存在多个功能相同的按钮，点击时所有按钮的事件都被触发。
  解决：渲染新题目前，先清空存放按钮的DOM容器，确保每次只有一个有效按钮。

二、正确答案提示错误的原因及解决 #

• HTML实体未解码：Open Trivia DB返回的答案常带有HTML实体（比如"、&），如果展示给用户的是解码后的文本，但验证时用了原始带实体的字符串对比，就会匹配失败。
  解决：统一解码答案内容，比如用DOM元素的textContent来解析实体：

  function decodeHtmlEntity(str) {
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = str;
    return tempDiv.textContent;
  }
  // 存储解码后的正确答案
  const correctAnswer = decodeHtmlEntity(apiData.correct_answer);
  

• 正确答案存储错误：打乱答案顺序时，没把当前题目的正确答案存到正确的变量里，或者变量被后续题目覆盖，导致对比时用的不是当前题目的正确答案。
  解决：每次加载单个题目时，把正确答案和题目数据绑定在一起（比如存在一个对象里），验证时直接从当前题目对象中取正确答案。
• 大小写不匹配：API返回的答案大小写和用户选择的不一致（比如正确答案是"London"，用户选的是"london"），用===直接对比会失败。
  解决：对比时统一转为小写（或大写）：

  if (userSelectedAnswer.toLowerCase() === correctAnswer.toLowerCase()) {
    // 正确逻辑
  }
  

代码修正示例 #

比如重复绑定问题的错误写法：

function loadNewQuestion() {
  // 请求API...
  const submitBtn = document.createElement('button');
  submitBtn.textContent = '提交';
  submitBtn.addEventListener('click', checkAnswer);
  document.getElementById('btn-box').append(submitBtn);
}

修正后：

function loadNewQuestion() {
  const btnBox = document.getElementById('btn-box');
  // 先清空旧内容
  btnBox.innerHTML = '';
  // 请求API...
  const submitBtn = document.createElement('button');
  submitBtn.textContent = '提交';
  submitBtn.addEventListener('click', checkAnswer);
  btnBox.appendChild(submitBtn);
}

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