为什么我的 console.log 语句在页面加载时运行 9 次并且每次都给我 0？答案

【问题标题】：Why is my console.log statement running 9 times when the page loads and gives me 0 every time?为什么我的 console.log 语句在页面加载时运行 9 次并且每次都给我 0？
【发布时间】：2021-09-23 04:21:19
【问题描述】：

我正在开发一款井字游戏，我正在尝试在玩家 1 的棋盘上有 5 个 X 导致平局时发送警报。

基本上玩家一总是先走并从 X 开始，如果玩家一的计数器击中 5，我想发送警报。但是每当我使用console.log p1Counter时，我什至在开始播放之前页面加载时都会得到0 9次。

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='styles.css'>
    <title>Tic Tac Toe</title>
  </head>
  <body>
    <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1>
    <div id='game-board'>
      <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>
    </div>
    <div id=button-box>
      <button type='button'>Reset!</button>
    </div>
    <script src='app.js'></script>
  </body>
</html>

这里是javascript代码：

document.addEventListener('DOMContentLoaded', function(event) {

  let boxes = document.getElementsByTagName('td');

  let p1Counter = 0;
  let p2Counter = 0;

  for (let i = 0; i < boxes.length; i++) {
    console.log(p1Counter)

    if (p1Counter === 5) {
      window.alert('Tie Game...')
    }

    boxes[i].onclick = elem => {

    if ((elem.target.textContent === 'X') ||
        (elem.target.textContent === 'O')) {
      return;
    }

    if (p1Counter === p2Counter) {
      elem.target.textContent = 'X';
      p1Counter++;
    } else {
      elem.target.textContent = 'O';
      p2Counter++;
    }
   }
  }
});

【问题讨论】：

您正在为表中的所有 td 创建一个循环，因为您有 9 个，它将始终运行 9 次控制台日志
你认为for (let i = 0; i < boxes.length; i++) 会做什么？
@PietroNadalini 游戏运行良好，所以计数器必须正确递增，我想知道为什么它没有给我更新的计数器结果
@Barmar 它遍历所有框（td's）对吗？
对。当它在迭代时，你会使用console.log(p1Counter)，所以你会得到 9 条日志。

标签： javascript html dom-events

【解决方案1】：

因为在onclick 赋值之后，它返回到新循环并且永远不会增加你的变量。

boxes[i].onclick = elem => {}

p1Counter只有在点击td标签时才会增加，我添加了一些样式来显示框以便于查看。

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='styles.css'>
    <title>Tic Tac Toe</title>
    <style>
    table, th, td {
  border: 1px solid black;
  height: 50px;
  width: 200px;
}
    </style>
  </head>
  <body>
    <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1>
    <div id='game-board'>
      <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>
    </div>
    <div id=button-box>
      <button type='button'>Reset!</button>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function(event) {

  let boxes = document.getElementsByTagName('td');

  let p1Counter = 0;
  let p2Counter = 0;

  for (let i = 0; i < boxes.length; i++) {
    console.log(p1Counter);
    
    if (p1Counter === 5) {
      window.alert('Tie Game...')
    }

    boxes[i].onclick = elem => {

    if ((elem.target.textContent === 'X') ||
        (elem.target.textContent === 'O')) {
      return;
    }

    if (p1Counter === p2Counter) {
      elem.target.textContent = 'X';
      p1Counter++;
      console.log(p1Counter);
    } else {
      elem.target.textContent = 'O';
      p2Counter++;
      console.log(p2Counter);
    }
   }
  }
});
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

您的 for 循环仅运行 1 次，当您的页面加载时，唯一再次运行的代码是 p1Counter 和 p2Counter 内的部分得到更新。

由于您的循环获得了 9 个 td 元素，因此您的 console.log 运行了 9 次。

document.addEventListener('DOMContentLoaded', function(event) {

  let boxes = document.getElementsByTagName('td');

  let p1Counter = 0;
  let p2Counter = 0;

  for (let i = 0; i < boxes.length; i++) {
    boxes[i].onclick = elem => {
      if (p1Counter === 5) {
        window.alert('Tie Game...')
      }
      if ((elem.target.textContent === 'X') ||
        (elem.target.textContent === 'O')) {
        return;
      }

      if (p1Counter === p2Counter) {
        elem.target.textContent = 'X';
        p1Counter++;
      } else {
        elem.target.textContent = 'O';
        p2Counter++;
      }
    }
  }
});

td {
  border: 1px solid black;
  padding: 10px;
}

<html>

<head>
  <link rel='stylesheet' href='styles.css'>
  <title>Tic Tac Toe</title>
</head>

<body>
  <h1 id='heading'>Tic-Tac-Toe World Championship 2021</h1>
  <div id='game-board'>
    <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>
  </div>
  <div id=button-box>
    <button type='button'>Reset!</button>
  </div>
</body>

</html>

【讨论】：