使用JavaScript更新H1元素问题：井字棋获胜后标题不切换

你的代码存在三个核心问题，导致玩家获胜后H1元素无法正确显示获胜信息，下面逐一说明并给出修复方案：

问题1：棋盘存储值与判断逻辑不匹配 #

你在board数组里存储的是currentPlayer的布尔值（false/true），但在checkWinner函数里却判断a === 'X'，两者类型和值完全不匹配，自然无法触发获胜提示。

问题2：获胜提示被后续代码覆盖 #

玩家落子后，你先调用checkWinner()设置了获胜信息，但紧接着又设置players.textContent为回合提示，直接覆盖了刚刚生成的获胜内容。

问题3：获胜后未阻止继续落子 #

即使判断出获胜，玩家仍然可以点击单元格，导致游戏状态混乱。

修正后的完整代码 #

HTML部分（无需修改） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jogo da Velha</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <br> <br>
  <div id="textContent">
    <label for="playerOne">Player Um:</label>
    <input type="text" name="" id="playerOne">
    <button type="submit" id="submitNameOne">Submit</button>

    <label for="playerTwo">Player Dois:</label>
    <input type="text" name="" id="playerTwo">
    <button type="submit" id="submitNameTwo">Submit</button>
    <button type="submit">Restart</button>
  </div>

  <div class="board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>

  <div>
    <br> <br>
    <h1 id="h1Id">Quem são os jogadores?</h1>
  </div>

  <script src="index.js" defer></script>
</body>
</html>

CSS部分（无需修改） #

.board {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 5px;
  margin: 50px auto 0 auto;
  max-width: fit-content;
}

.cell {
  background-color: #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

JavaScript修正版 #

const cells = document.querySelectorAll(`.cell`);
let playerOne = "";
let playerTwo = "";
let currentPlayer = 'X'; // 直接用X/O表示当前玩家，避免布尔值混淆
let submitOne = false
let submitTwo = false // 初始设为false，和submitOne保持一致
let board = ["", "", "", "", "", "", "", "", ""];
const winCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];
const players = document.getElementById(`h1Id`)
let gameActive = true; // 标记游戏是否还在进行

function game() {
  document.getElementById("submitNameOne").addEventListener("click", () => {
    playerOne = document.getElementById("playerOne").value.trim();
    submitOne = !!playerOne; // 确保输入不为空
  });

  document.getElementById(`submitNameTwo`).addEventListener(`click`, () => {
    playerTwo = document.getElementById("playerTwo").value.trim();
    submitTwo = !!playerTwo;
    checkSubmit()
  })

  cells.forEach((cell, index) => {
    cell.addEventListener(`click`, () => {
      // 只有游戏未结束、单元格为空、玩家已提交名字时才允许落子
      if (!gameActive || board[index] !== `` || !submitOne || !submitTwo) return;

      board[index] = currentPlayer;
      cell.textContent = currentPlayer;

      // 先检查是否获胜
      if (checkWinner()) {
        players.textContent = `${currentPlayer === 'X' ? playerOne : playerTwo} Won!`;
        gameActive = false; // 结束游戏
        return;
      }

      // 检查是否平局
      if (board.every(cell => cell !== ``)) {
        players.textContent = "平局!";
        gameActive = false;
        return;
      }

      // 切换玩家并更新回合提示
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      players.textContent = `Vez de ${currentPlayer === 'X' ? playerOne : playerTwo}`;
    });
  });
}

function checkWinner() {
  for (const combination of winCombinations) {
    const [a, b, c] = combination.map(index => board[index]);
    if (a !== `` && a === b && b === c) {
      return true; // 找到获胜组合，返回true
    }
  }
  return false; // 未找到获胜组合
}

function checkSubmit() {
  if (submitOne && submitTwo) {
    players.textContent = `Vez de ${playerOne}`;
    gameActive = true; // 开始游戏
  } else {
    players.textContent = "请输入两名玩家的名字！";
  }
}

game();

关键修复点说明 #

• 将currentPlayer改为用'X'和'O'表示，与棋盘存储值、单元格显示内容保持一致，彻底解决类型混淆问题。
• 新增gameActive变量控制游戏状态，获胜或平局后禁止继续落子。
• 调整逻辑顺序：落子后先检查获胜/平局，确认无结果后再切换玩家并更新回合提示，避免获胜信息被覆盖。
• 优化玩家名字提交逻辑，确保输入不为空才允许开始游戏。

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