开发井字棋时页面加载后console.log执行9次且均输出0是什么原因

问题原因 #

• 你把console.log(p1Counter)和平局判断逻辑写在了遍历单元格绑定点击事件的for循环里，DOM加载完成后这个循环会立刻执行9次（对应9个棋盘单元格），此时还没有任何点击操作，p1Counter初始值为0，所以会连续输出9次0，而且此时也不可能触发平局判断。
• 平局判断的逻辑应该放在每次玩家完成落子之后，而不是绑定事件的初始化阶段。

修复后的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++) {
    boxes[i].onclick = elem => {
      if ((elem.target.textContent === 'X') ||
          (elem.target.textContent === 'O')) {
        return;
      }

      if (p1Counter === p2Counter) {
        elem.target.textContent = 'X';
        p1Counter++;
        // 玩家1落子完成后统计次数、判断平局
        console.log(p1Counter)
        if (p1Counter === 5) {
          window.alert('平局...')
        }
      } else {
        elem.target.textContent = 'O';
        p2Counter++;
      }
    }
  }
});

内容的提问来源于stack exchange，提问作者Poyraz Akay