井字游戏不在单元格中进行更改

Question

我将我的 html 与 js 和 css 链接起来，但我的代码无法正常工作。我尝试为所有 table 单元格使用 class 名称，但它仍然无效我的 html 文件：

!DOCTYPE html>
<html lang="en" dir="ltr">

<link rel="stylesheet" href="something.css">
<!--bootstrap library-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/4.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


    <meta charset="utf-8">
    <title>tic tac toe</title>
  </head>
  <body>
    <div class="jumbotron jumbotron-bg">
    <h1 class="display-4 text-color" style="font-weight: 500  ">WELCOME</h1>
    <p class="lead">play tic tac toe</p>
    <hr class="my-4">
    <p></p>
    <p class="lead">
      <a class="btn btn-primary btn-lg" href="#" role="button">start</a>
    </p>
  </div>
  </div>
    <table>
      <tr>
        <td></td>
        <td ></td>
        <td ></td>
      </tr>
      <tr>
        <td ></td>
        <td ></td>
        <td ></td>
      </tr>
      <tr>
        <td ></td>
        <td ></td>
        <td ></td>
      </tr>
    </table>

<script src="tictac.js">

</script>

  </body>
</html>

忽略开始按钮我将其与 js 代码相关联，以便使上述代码正常工作并在 css

的帮助下打印带有空单元格的 3x3 table

我的js代码：

var table = document.querySelectorAll('td')
function click(){
  if(this.textComment==""){
    this.textComment="o"
  }
  if (this.textComment=="o") {
    this.textComment=""
  }
  if (this.textComment=="") {
    this.textComment="x"

  }
}
for (var i = 0; i < table.length; i++) {
  table[i].addEventListener("click", click())
}

Answer 1

乍一看，您需要绑定函数 click 而不是它的执行结果。将您的 事件侦听器 行更改为 table[i].addEventListener("click", click).

此外，我认为您打算在 click 中使用 textContent 而不是 textComment。

井字游戏不在单元格中进行更改

tic tac toe not making changes in cell

html

javascript

css

tic-tac-toe