内部 HTML 在这种情况下无法使用井字游戏 ai

Question

看，我有一个井字游戏 ai：

function checkForThreats() {
  for (let i = 0; i <= 7; i++) {
    var cell = winningConditions[i].indexOf("");
      let index = gameState[cell];
      document.querySelector(`[data-cell-index="${index}"]`).innerHTML = "O";
  }
}

它给了我一个错误，我无法设置 null 的属性，我对这将如何工作感到困惑。

我试图改变并弄乱字符串插值，但它仍然出错。

Answer 1

错误消息“无法设置 null 的属性”通常表示您正试图访问或调用当前为 null、未定义或不是对象的变量的方法。在这种情况下，文档很可能是错误的原因。

document.querySelector

函数找不到匹配的元素。

根据您提供的代码，您似乎正试图通过使用数据属性

data-cell-index

来定位页面上的元素。派生自

index

数组的

gameState

变量用于动态生成该属性的值。 gameState 数组可能不包含您尝试选择的元素的有效索引，导致

document.querySelector

返回一个空数组。

这里有一些建议可以帮助您解决此错误。 :

验证

gameState

数组是否包含您要选择的元素的有效索引。这可以通过将

index

值记录到控制台并验证它是否匹配有效值来完成。

确定

document.querySelector

函数可以定位页面上的匹配元素。您可以通过使用

data-cell-index

属性的硬编码值单独运行它来检查该函数是否返回有效元素。

检查

winningCondition

s 数组是否正确用于确定需要选择的单元格的索引。用于计算索引的逻辑可能存在问题，导致使用无效值来选择元素。

希望您能够通过以上方法解决您的问题。