井字棋项目技术求助：按钮文本无法从"1"改为"X"

核心错误原因 #

控制台提示“无法设置null的属性”，结合你的代码来看，主要有两个关键问题：

• 误用按钮属性：普通<button>的显示文本不是通过value属性控制的，value是表单提交时传递的参数，修改按钮显示内容需要用textContent或innerText。
• 冗余的元素查找：你通过类选择器二次查找按钮，不仅没必要，还可能因选择器拼写错误导致获取到null，直接传递当前点击的按钮元素更可靠。

修复后的代码 #

JavaScript 调整 #

function changeX(button) {
    button.textContent = "X";
}

HTML 修正 #

给所有按钮绑定点击事件，直接传递当前元素：

<button type="button" class="but1" onclick="changeX(this)">1</button>
<button type="button" class="but2" onclick="changeX(this)">2</button>
<button type="button" class="but3" onclick="changeX(this)">3</button>
<button type="button" class="but4" onclick="changeX(this)">4</button>
<button type="button" class="but5" onclick="changeX(this)">5</button>
<button type="button" class="but6" onclick="changeX(this)">6</button>
<button type="button" class="but7" onclick="changeX(this)">7</button>
<button type="button" class="but8" onclick="changeX(this)">8</button>
<button type="button" class="but9" onclick="changeX(this)">9</button>

进阶优化建议 #

可以用事件委托代替逐个绑定onclick，代码更简洁易维护：

// 给容器绑定点击事件，自动处理所有按钮点击
document.querySelector('.container1').addEventListener('click', function(e) {
    // 判断点击的是按钮元素
    if (e.target.tagName === 'BUTTON') {
        e.target.textContent = "X";
    }
});

此时HTML里不需要写onclick属性，保持结构干净：

<button type="button" class="but1">1</button>
<button type="button" class="but2">2</button>
<!-- 其他按钮同理 -->

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