开发井字棋时getElementById返回null及按钮onclick属性异常求助

一、onclick绑定异常问题 #

你的代码里btn.onclick=clicked()是立即执行了clicked函数，而非将函数绑定到点击事件上。正确写法是直接赋值函数引用（不加括号）：

btn.onclick = clicked;
// 更推荐使用addEventListener：
btn.addEventListener('click', clicked);

同时，当前clicked函数逻辑完全错误——它会遍历所有按钮，只要找到非-的按钮就修改，不符合“点击单个按钮落子”的需求。修改为仅处理被点击的按钮：

function clicked() {
  // 仅当按钮未被点击过时允许操作
  if (this.innerText === "-") {
    this.innerText = player === 1 ? "x" : "o";
    // 切换玩家
    player = player === 1 ? 2 : 1;
  }
}

这里用this指代被点击的按钮，直接操作当前元素即可。

二、getElementById返回null的问题 #

从你提供的代码看，你并未使用getElementById()，但如果是之前尝试用该方法获取动态按钮，问题出在：

• 动态创建的按钮未设置id属性，无法通过id定位；
• 若在DOM元素创建完成前调用getElementById()，也会返回null。

实际上你已经用btns数组存储了所有按钮，完全不需要通过getElementById()获取，直接通过数组访问即可。如果确实需要用id，创建按钮时可添加：

btn.id = `btn-${y}-${x}`;

三、其他优化点 #

1. 变量声明：所有变量需用let/const声明，避免污染全局作用域：

let player = 1;
const btns = [[], [], []];
let i = 0;

2. 脚本加载时机：将脚本放在<body>标签末尾，确保DOM加载完成（虽你是动态创建元素，但此写法更规范）：

<!DOCTYPE html>
<html>
<head>
    <title>tic tac toe</title>
</head>
<body>
    <script src="javas.js"></script>
</body>
</html>

修复后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>tic tac toe</title>
</head>
<body>
    <script src="javas.js"></script>
</body>
</html>

JavaScript代码 #

let player = 1;
const btns = [[], [], []];
let i = 0;

for (let y = 0; y < 3; y++) {
  for (let x = 0; x < 3; x++) {
    i++;
    const btn = document.createElement("button");
    btn.innerText = "-";
    btn.addEventListener('click', clicked);
    btns[y].push(btn);
    document.body.appendChild(btn);
  }
  document.body.appendChild(document.createElement("br"));
}

function clicked() {
  if (this.innerText === "-") {
    this.innerText = player === 1 ? "x" : "o";
    player = player === 1 ? 2 : 1;
  }
}

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