JavaScript Hangman游戏事件监听器异常问题求助

核心问题原因 #

每次调用checkLetter函数时，都会给buttonGrid新增一个点击事件监听器。当进入后续题目时，buttonGrid上会同时存在多个监听器（对应每一道历史题目）。点击按钮时，所有监听器都会触发：

• 对应当前题目的监听器会判定字母正确，执行绿色标记逻辑
• 对应之前题目的监听器会判定字母错误（因为当前按钮字符不在之前题目的答案里），执行红色标记逻辑
  最终导致同一个按钮被同时标记为正确和错误，guesses被错误扣除，提前终止游戏。

修复方案 #

1. 重构监听器逻辑：只绑定一次监听器

将点击事件监听器从checkLetter中移出，改为初始化时只绑定一次，通过全局变量存储当前题目的目标数据。

// 声明全局变量存储当前题目的关键数据
let currentSpanArray = null;
let currentSpanLetter = null;

// 初始化时绑定一次点击监听器（放在页面加载或游戏初始化逻辑里）
buttonGrid.addEventListener("click", (event) => {
  // 无当前题目、点击目标不是字母按钮、按钮已禁用时，直接返回
  if (!currentSpanArray || !currentSpanLetter || 
      event.target.classList.contains("not-this") || 
      event.target.disabled) {
    return;
  }

  attempts += 1;
  const clickedText = event.target.textContent;

  if (currentSpanLetter.includes(clickedText)) {
    // 正确逻辑
    event.target.classList.add("correct");
    event.target.disabled = true;

    // 计算剩余未显示的字母数量
    let remainingLetters = 0;
    currentSpanArray.forEach((value) => {
      if (value.textContent === clickedText) {
        value.classList.remove("hide");
        score += 10;
      }
      if (value.classList.contains("hide")) remainingLetters++;
    });

    // 所有字母已显示，切换下一题
    if (remainingLetters === 0) {
      setTimeout(() => {
        clearGrid();
        printQuestion();
      }, 500);
    }
  } else {
    // 错误逻辑
    event.target.classList.add("incorrect");
    event.target.disabled = true;
    guesses--;
    incorrectGuess.textContent = guesses;
    score -= 10;

    if (guesses === 0) {
      endgame();
    }
  }
});

2. 替换原checkLetter函数：仅更新当前题目数据

删除原checkLetter函数，改为每次生成新题目时，更新全局变量并重置按钮状态：

function setCurrentQuestion(spanarray, spanletter) {
  currentSpanArray = spanarray;
  currentSpanLetter = spanletter;
  
  // 重置所有字母按钮的状态：清除标记、启用按钮
  document.querySelectorAll(".letter-button").forEach(btn => {
    btn.classList.remove("correct", "incorrect");
    btn.disabled = false;
  });
}

3. 修改printQuestion调用

在printQuestion函数生成题目后，调用setCurrentQuestion传入当前题目的spanarray和spanletter，替代原有的checkLetter调用。

关键注意点 #

• 避免重复绑定事件监听器是这类问题的核心解决思路
• 切换题目时必须重置按钮状态，否则上一题的按钮标记会干扰新题操作

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