如何让井字棋按钮的textContent点击后保持固定不变？

方法1：通过判断格子内容提前终止操作 #

在playRound函数开头添加判断，若当前格子已有内容（非空），直接结束函数，不执行后续的标记放置逻辑：

const playRound = (e) => {
    // 检查格子是否已被占用，有内容则直接返回
    if (e.currentTarget.textContent.trim() !== '') {
        return;
    }

    let playerInput = e.currentTarget.dataset.number
    placeMarker(playerInput, getActivePlayer().marker);
    e.currentTarget.textContent = getActivePlayer().marker;
    _switchPlayerTurn();

    printNewRound();
    console.log(`${board}`);
    console.log(typeof board);
    console.log(GameBoard.getBoard());
}

trim()用来过滤格子里的空白字符，确保只有真正空的格子才允许操作。

方法2：点击后移除该格子的点击事件 #

第一次点击格子后，直接移除它的click事件监听器，后续点击不会再触发playRound函数，从根源上阻止修改：

const playRound = (e) => {
    let playerInput = e.currentTarget.dataset.number
    placeMarker(playerInput, getActivePlayer().marker);
    e.currentTarget.textContent = getActivePlayer().marker;
    // 移除当前格子的点击事件，防止重复操作
    e.currentTarget.removeEventListener('click', playRound);
    _switchPlayerTurn();

    printNewRound();
    console.log(`${board}`);
    console.log(typeof board);
    console.log(GameBoard.getBoard());
}

方法3：结合数据层判断（更严谨） #

井字棋通常会有数据层（比如你的GameBoard）记录棋盘状态，优先判断数据层的对应位置是否已被占用，避免DOM和数据层状态不一致：

const playRound = (e) => {
    let playerInput = e.currentTarget.dataset.number;
    // 从数据层获取棋盘状态，判断该位置是否已被标记
    const boardState = GameBoard.getBoard();
    // 假设数据层初始为空字符串，根据你的实际逻辑调整判断条件
    if (boardState[playerInput] !== '') {
        return;
    }

    placeMarker(playerInput, getActivePlayer().marker);
    e.currentTarget.textContent = getActivePlayer().marker;
    _switchPlayerTurn();

    printNewRound();
    console.log(`${board}`);
    console.log(typeof board);
    console.log(GameBoard.getBoard());
}

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