JavaScript小游戏变量未更新：answer()函数未识别a、b值变更

问题根源 #

1. 重复绑定事件监听器：每次调用play()时，都会给window的keypress和按钮的click事件新增监听器，旧的监听器不会自动销毁。当进行第二轮游戏时，按下回车或点击按钮，会同时触发所有之前绑定的answer()函数。
2. 闭包捕获旧变量：旧的answer()函数会捕获第一次调用play()时生成的a、b值，导致只有当新的和与第一次相同时，旧的answer()才会判定正确，看起来像是新的a、b没被识别。

修复方案 #

核心思路是避免重复绑定事件，同时确保answer()能访问到最新的随机数：

修改后的代码

let count = 0;
let a, b; // 全局变量存储最新随机数，让answer能直接获取

function play() {
    if (count < 10) {
        count += 1;
        document.getElementById("user-answer").value = "";
        // 生成新的随机数并更新全局变量
        a = Math.floor(Math.random() * 20) + 1;
        b = Math.floor(Math.random() * 20) + 1;
        const question = document.getElementById("question");
        question.textContent = `${a} + ${b}`;
    } else {
        document.getElementById("win").textContent = "You won!";
    }
}

// 独立的验证函数，只写一次
function answer() {
    const result = a + b;
    const userAnswer = document.getElementById("user-answer").value;
    
    if (userAnswer == result) {
        sound.play();
        play();
    } else {
        document.getElementById("user-answer").classList.add("wrong");
        console.log(result, userAnswer);
    }
}

// 事件监听器只绑定一次，放在play外面
window.addEventListener("keypress", function(event) {
    if (event.key === "Enter") {
        answer();
    }
});

document.getElementById("send-answer").addEventListener("click", answer);

关键修改点

• 将a、b提升为全局变量，确保answer()每次执行都能拿到最新的随机数。
• 把answer()函数和事件监听器移到play()外部，只绑定一次，彻底避免重复触发旧逻辑。
• 用模板字符串优化问题文本拼接，代码更简洁易读。

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