JS井字棋开发：button.value无法获取按钮文本值问题咨询

问题根因 #

代码中按钮内容的赋值和取值操作使用了两个完全独立的DOM属性，没有对齐：

• 落子时通过event.target.innerText = turn给按钮设置文本内容，写入的是元素的innerText属性
• 胜负校验时通过buttons[i].value读取元素的value属性
  全程没有对按钮的value属性做过任何赋值，读取结果自然为空，和按钮上已经显示X/O的表现不符。

代码同时存在几个隐性问题：

• 事件回调未显式接收event参数，直接依赖全局event对象在部分浏览器会触发报错
• 变量未添加声明关键字，会意外污染全局作用域
• 胜负判断仅覆盖了第一行X获胜的场景，其余获胜组合、O获胜的逻辑完全缺失

修复方式 #

最小改动方案 #

直接把校验逻辑里读取value的代码改成读取innerText，和现有赋值逻辑对齐，同时补全事件参数、变量声明即可：

1. 给input函数添加event形参，所有局部变量加let/const声明
2. 把check函数里所有buttons[n].value替换为buttons[n].innerText

修改后的check函数核心片段：

function check()
{
    console.log("Values of buttons="+buttons[0].innerText+buttons[1].innerText+buttons[2].innerText)
    if(buttons[0].innerText === "X" && buttons[1].innerText === "X" && buttons[2].innerText === "X" )
    {
        console.log("Entered")
        return 1;
    }
}

修改后的input函数开头：

function input(event) // 新增event形参
{
    let gameOverCheck=false; // 新增let声明
    // 其余原有逻辑不变
}

逻辑统一方案 #

如果要继续用value属性做判断，就在落子赋值时同步更新value属性：

// 落子逻辑中新增value赋值
event.target.innerText=turn;
event.target.value = turn; // 同步写入value属性
event.target.disabled=true;

完整优化后代码 #

把重复的X/O分支、胜负判断逻辑做了精简，覆盖所有获胜场景，可直接运行：

const buttons = document.querySelectorAll(".Grid-Button");
const MessageBox = document.querySelector("#Message-Box");

const choice = ["X", "O"];
let turn = choice[0];
MessageBox.innerText = `${turn}'s Turn`;

for (let i = 0; i < 9; i++) {
  buttons[i].addEventListener("click", input);
}

function input(event) {
  const currentBtn = event.target;
  // 已落子的按钮直接返回
  if (currentBtn.disabled) return;

  currentBtn.innerText = turn;
  currentBtn.disabled = true;
  currentBtn.style.color = "green";
  currentBtn.style.border = "1px solid black";

  if (check() === 1) {
    MessageBox.innerText = `${turn} Win!`;
    // 获胜后禁用所有按钮
    buttons.forEach(btn => btn.disabled = true);
    return;
  }

  // 切换回合
  turn = turn === "X" ? choice[1] : choice[0];
  MessageBox.innerText = `${turn}'s Turn`;
}

function check() {
  // 所有获胜组合：三行、三列、两个对角线
  const winPatterns = [
    [0,1,2], [3,4,5], [6,7,8],
    [0,3,6], [1,4,7], [2,5,8],
    [0,4,8], [2,4,6]
  ];

  for (const pattern of winPatterns) {
    const [a, b, c] = pattern;
    const val = buttons[a].innerText;
    if (val && val === buttons[b].innerText && val === buttons[c].innerText) {
      return 1;
    }
  }
  return 0;
}

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