井字棋按钮点击后无法锁定：value无法从false改为true

核心问题 #

1. 参数类型错误：传给changeX的是选择器字符串（比如.but1），不是DOM按钮元素，所以buttonType.value根本不存在，自然无法修改。
2. 按钮锁定逻辑失效：仅修改value属性无法阻止用户点击，必须设置按钮的disabled属性才能真正锁定。
3. 多数按钮未绑定事件：除第一个按钮外，其他按钮没有添加onclick事件和初始value，无法触发逻辑。

修复后的代码 #

JavaScript（board.js）

let player = 0;

// 直接接收点击的按钮元素
function changeX(button) {
    // 检查按钮是否已禁用，或者已有内容（双重保险）
    if (!button.disabled && button.textContent.trim() === button.value) {
        if (player === 0) {
            button.textContent = "X";
            player = 1;
        } else {
            button.textContent = "O";
            player = 0;
        }
        // 禁用按钮，阻止再次点击
        button.disabled = true;
        // 可选：修改value标记已点击
        button.value = "true";
    }
}

HTML

给所有按钮添加onclick="changeX(this)"和初始value（对应初始显示的数字）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Tic Tac Toe Project</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <section>
            <header id="header">
                Tic Tac Toe
            </header>
        </section>
        <section>
            <div class="container1">
                <button type="button" class="but1" onclick="changeX(this)" value="1">1</button>
                <button type="button" class="but2" onclick="changeX(this)" value="2">2</button>
                <button type="button" class="but3" onclick="changeX(this)" value="3">3</button>
                <button type="button" class="but4" onclick="changeX(this)" value="4">4</button>
                <button type="button" class="but5" onclick="changeX(this)" value="5">5</button>
                <button type="button" class="but6" onclick="changeX(this)" value="6">6</button>
                <button type="button" class="but7" onclick="changeX(this)" value="7">7</button>
                <button type="button" class="but8" onclick="changeX(this)" value="8">8</button>
                <button type="button" class="but9" onclick="changeX(this)" value="9">9</button>
            </div>
        </section>
        <script src="board.js"></script>
    </body>
</html>

CSS（保持原代码即可）

关键修改说明 #

• 传参改为按钮本身：用this直接把点击的DOM按钮传给函数，避免重复查询DOM，同时能直接操作按钮的属性。
• 用disabled锁定按钮：设置button.disabled = true后，按钮会变成不可点击状态，从根源阻止重复点击。
• 双重判断防误触：同时检查按钮是否禁用、初始文本是否未修改，避免异常情况触发逻辑。
• 统一所有按钮配置：给每个按钮绑定点击事件和初始value，确保所有格子都能正常使用。

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