井字游戏为什么脚本不起作用

Question

我正在尝试用 javascript 编写一个井字游戏，但是代码中有一个错误没有显示在控制台中，有人可以告诉我脚本有什么问题吗。

var box = document.getElementById("box");
var subBox = document.getElementsByClassName("subBox");
var num = 0;

function turn() {

  if (num % 2 == 0) {
    document.subBox.this.innerHTML = "X";
    num++;
  } else if (num % 2 == 1) {
    document.subBox.this.innerHTML = "O";
    num++;
  }

}

for (i = 0; subBox.length < i; i++) {
  subBox[i].addEventListener('click', turn());
}

Answer 1

你还没有发布数据结构。 subBox是什么元素？

这条线看起来不太好……

document.subBox.this.innerHTML="X";

应该是……

subBox.innerHTML="X";

但是如果它是一个 two-dimensional 数组那么它应该去...

subBox[x][y].innerHTML="X";

不用说 one-dimension 数组应该是...

subBox[x].innerHTML="X";

Answer 2

您遇到了一堆小问题，无法使您的代码正常工作。首先，您没有正确循环遍历 for 循环。逻辑是相反的，所以循环不是运行。 if 检查的第一次迭代是检查 9 < 0。这是错误的，因此从未分配事件。

您在事件侦听器中调用了 click 而不是分配对元素的引用。

第三，您错误地使用了 this 引用来获取被单击以更改单元格文本的元素。

下面是更正了这些问题的代码。

var subBox = document.getElementsByClassName("subBox");
var num = 0;

function turn() { 
  
  // reference element with this
  console.log(this);

  if (this.innerHTML.length) {
    return;
  } else if (num % 2 == 0) {
    this.innerHTML = "X";
  } else {
    this.innerHTML = "O";
  }
  num++;
}

// for loop was wrong
for (i = 0; i < subBox.length; i++) {
  // you assign turn, you do not execute it
  subBox[i].addEventListener('click', turn);
}

div.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
   grid-gap: 0px;
}

div.subBox {
  line-height: 100px;
  font-size: 30px;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

<div class="box">
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
  <div class="subBox"></div>
</div>

井字游戏为什么脚本不起作用

Tic Tac Toe why is the script not working

javascript

arrays

tic-tac-toe