如何用单个函数根据点击定位对应按钮？（井字棋优化）

首先，你原代码存在一个核心问题：多个按钮使用了同一个id="cell"，这不符合HTML规范——页面中id必须唯一，浏览器只会识别第一个带该id的元素，所以之前的函数只能修改第一个按钮。

要实现点击哪个按钮就把X放到该按钮上，只需要一个函数，具体实现步骤如下：

1. 修正HTML：去掉重复的id，给所有按钮绑定同一个点击函数（比如placeX()），并在调用时传入事件对象event。
2. 在JS函数中，通过事件对象的target属性，精准获取当前被点击的按钮元素，再修改它的内容。

完整代码示例 #

<!-- HTML部分 -->
<button onclick="placeX(event)">-</button>
<button onclick="placeX(event)">-</button>
<button onclick="placeX(event)">-</button>

<script>
// JS函数
function placeX(event) {
  // event.target 指向当前被点击的按钮元素
  event.target.textContent = 'X';
  // 若需插入HTML内容可改用innerHTML，但纯文本场景下textContent更安全
  // event.target.innerHTML = 'X';
}
</script>

关键说明 #

• event.target：触发点击事件时，这个属性会直接指向触发事件的具体DOM元素（即你点击的那个按钮），以此实现精准定位，无需为每个按钮编写单独函数。
• 如果需要给按钮添加统一样式，可以给它们加上同一个class（比如<button class="tic-cell" onclick="placeX(event)">-</button>），再用CSS控制样式，完全不影响功能逻辑。

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