如何编写JavaScript if语句检测HTML元素内容实现井字棋获胜弹窗

你的实现思路是完全可行的，对新手来说逐个写8种获胜情况的判断逻辑清晰、容易调试，完全可以先用这种方式实现。
你之前的测试代码的问题在于只判断了单个格子的内容，且如果代码执行时机不对（比如页面加载时就运行，此时格子还没有被赋值），就不会生效。

下面是直接可用的简单实现：

第一步：编写获胜判断函数 #

// 传入当前落子玩家的符号 'X' 或 'O'，判断是否获胜
function checkWin(player) {
  // 第一行获胜
  if (
    document.getElementById('topLeft').textContent === player &&
    document.getElementById('topCenter').textContent === player &&
    document.getElementById('topRight').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 第二行获胜
  if (
    document.getElementById('middleLeft').textContent === player &&
    document.getElementById('middleCenter').textContent === player &&
    document.getElementById('middleRight').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 第三行获胜
  if (
    document.getElementById('bottomLeft').textContent === player &&
    document.getElementById('bottomCenter').textContent === player &&
    document.getElementById('bottomRight').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 第一列获胜
  if (
    document.getElementById('topLeft').textContent === player &&
    document.getElementById('middleLeft').textContent === player &&
    document.getElementById('bottomLeft').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 第二列获胜
  if (
    document.getElementById('topCenter').textContent === player &&
    document.getElementById('middleCenter').textContent === player &&
    document.getElementById('bottomCenter').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 第三列获胜
  if (
    document.getElementById('topRight').textContent === player &&
    document.getElementById('middleRight').textContent === player &&
    document.getElementById('bottomRight').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 左上到右下对角线获胜
  if (
    document.getElementById('topLeft').textContent === player &&
    document.getElementById('middleCenter').textContent === player &&
    document.getElementById('bottomRight').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 右上到左下对角线获胜
  if (
    document.getElementById('topRight').textContent === player &&
    document.getElementById('middleCenter').textContent === player &&
    document.getElementById('bottomLeft').textContent === player
  ) {
    alert('玩家' + player + '获胜！');
    return true;
  }
  // 未满足任何获胜条件
  return false;
}

这里用textContent代替innerHTML，只会读取元素内的纯文本内容，不会误读标签、空格等内容，判断更稳定。

第二步：在落子逻辑中调用判断函数 #

你原来的落子逻辑中，给点击的格子赋值X/O完成后，立刻调用上面的函数即可，示例：

// 记录当前轮到哪个玩家落子，初始为X
let currentPlayer = 'X';

// 格子点击事件逻辑示例，可复用在所有格子的点击事件上
document.getElementById('topLeft').addEventListener('click', function() {
  // 先判断格子是否为空，空的才能落子
  if (this.textContent === '') {
    // 赋值当前玩家的符号
    this.textContent = currentPlayer;
    // 立刻判断当前玩家是否获胜
    const isWin = checkWin(currentPlayer);
    if (isWin) {
      // 获胜后直接结束，不再切换玩家
      return;
    }
    // 未获胜，切换玩家
    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  }
})

如果要实现平局判断，只需要在每次切换玩家前，判断所有9个格子是否都有内容，如果都有内容且checkWin返回false，就弹出平局提示即可。

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