时间戳

首页 > 解决方案 > 井字游戏不改变单元格

javascript - 井字游戏不改变单元格

问题描述

我将我的 html 与 js 和 css 链接，但我的代码不起作用。我尝试为所有表格单元格使用类名，但它仍然无法使用我的 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 表

我的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())
}

标签： javascripthtmlcsstic-tac-toe

解决方案

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

另外我认为你的意思是使用textContent而不是textComment里面click。

推荐阅读