JavaScript测验游戏问答循环实现及二次判断失效解决方案

核心问题 #

你遇到的第二次及之后问答环节判断日志不输出的原因很明确：

• RIGHT变量仅在页面加载时被赋值一次（第一次调用SetQuiz()的返回值），后续每次调用SetQuiz()生成新题目时，RIGHT并没有被更新为新的正确答案。
• 按钮的点击事件监听是一次性绑定的，每次点击时判断用的始终是第一次的RIGHT值，和新题的正确答案完全不匹配，自然不会输出正确的日志。

修复方案 #

方案1：更新全局RIGHT变量

每次调用SetQuiz()后，把返回的新正确答案赋值给RIGHT，让判断逻辑能拿到当前题目的正确值：

let RIGHT = SetQuiz();

const $btn = document.getElementsByClassName('btn');
for(let i = 0; i < $btn.length; i++) {
  $btn[i].addEventListener("click",()=>{
    if(RIGHT===$btn[i].textContent){
      console.log("GOOD！");
      RIGHT = SetQuiz(); // 更新RIGHT为新题的正确答案
    }
    else{
      console.log("Not GOOD");
      RIGHT = SetQuiz(); // 同样更新RIGHT
    }
  })
}

方案2：用闭包保存当前题目的正确答案（更优雅写法）

把判断逻辑和题目渲染绑定在一起，避免全局变量的问题，每次生成题目时给按钮绑定新的判断逻辑：

function SetQuiz() {
  // 原SetQuiz内的代码保持不变...
  
  const currentCorrect = correct; // 保存当前题目的正确答案
  
  // 给按钮绑定判断逻辑
  const $btn = document.getElementsByClassName('btn');
  for(let i = 0; i < $btn.length; i++) {
    // 先移除旧的监听，避免重复绑定导致多次触发
    $btn[i].onclick = null;
    $btn[i].addEventListener("click",()=>{
      if(currentCorrect===$btn[i].textContent){
        console.log("GOOD！");
        SetQuiz();
      }
      else{
        console.log("Not GOOD");
        SetQuiz();
      }
    })
  }
  
  return currentCorrect;
}

// 初始化调用
SetQuiz();

额外优化建议 #

1. 你的csvArray每次调用SetQuiz()都会用splice删除元素，当数组元素被删完后会报错，建议添加判断：

if (csvArray.length === 0) {
  console.log("所有题目已完成！");
  return;
}

把这段代码放在SetQuiz()开头生成randnum之前。

2. 用fetch替代老式的XMLHttpRequest，代码更简洁易读：

async function loadCSV() {
  try {
    const response = await fetch('./csvfile/Word_List_1.csv');
    const text = await response.text();
    const lines = text.split(/\r\n|\n/);
    csvArray = lines.map(line => line.split(","))
                    .filter(cells => cells.length !== 1);
    SetQuiz(); // CSV加载完成后初始化题目
  } catch (err) {
    console.log(err);
  }
}

// 页面加载时调用加载函数
loadCSV();

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