井字棋AI开发问题：compMove函数条件判断失效求助

问题原因 #

你在Xon1()函数里犯了变量作用域错误：当你写let X1 = true时，创建了一个函数内部的局部变量X1，它和全局声明的let X1 = false是完全独立的两个变量。这导致全局的X1始终保持初始的false值，所以compMove()里的if(X1 === true)条件永远无法满足，函数也就不会执行内部逻辑。

另外你的HTML代码还有两处小问题：

• 最后一行的几个<button"标签多了一个引号，属于语法错误
• 中间的按钮没有设置id="5"，document.getElementById("5")会找不到目标元素

修正后的完整代码 #

JavaScript 部分

let O1 = false
let X1 = false
let turn = 0

function Xon1() {
  if(O1 === false && X1 === false && turn === 0) {
    document.getElementById("1").innerHTML = 'X'
    // 去掉let，直接修改全局变量X1
    X1 = true
    setTimeout(compMove, 1000)
  }
}

function compMove() {
  if(X1 === true) {
    document.getElementById("5").innerHTML = 'O'
  }
}

CSS 部分

td {
  border: 1px solid black;
  height: 50px;
  width: 50px;
}

HTML 部分

<html>
  <body>
    <table>
      <tr>
          <td align='center'><button id="1" onclick="Xon1()">-</button></td>
          <td align='center'><button>-</button></td>
          <td align='center'><button>-</button></td>
      </tr>
      <tr>
          <td align='center'><button>-</button></td>
          <!-- 给中间按钮添加id="5" -->
          <td align='center'><button id="5">-</button></td>
          <td align='center'><button>-</button></td>
      </tr>
      <tr>
          <td align='center'><button>-</button></td>
          <td align='center'><button>-</button></td>
          <td align='center'><button>-</button></td>
      </tr>
    </table>
  </body>
</html>

关键修改点 #

1. 移除Xon1()里的let关键字，直接对全局的X1赋值，确保全局变量状态被正确更新
2. 修复HTML中按钮标签的语法错误
3. 为中间按钮添加id="5"，保证getElementById能找到目标元素

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