(JavaScript) 如何防止用户点击已被点击的井字游戏？答案

【问题标题】：(JavaScript) How do I prevent a user from clicking in a tic tac toe square that has already been clicked on?(JavaScript) 如何防止用户点击已被点击的井字游戏？
【发布时间】：2019-07-22 21:05:15
【问题描述】：

我正在制作一个 2 人井字游戏，但我不知道如何防止玩家点击已被点击的方格。

我尝试添加if (squareId.innerText = "" )，但这似乎不起作用。有什么建议吗？

var player = [];
var players = ['X', 'O'];
player[0] = "Player 1";
player[1] = "Player 2";
var turn = 0;
var cells = document.querySelectorAll(".cell");



const winCombos = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 4, 8],
  [6, 4, 2],
  [2, 5, 8],
  [1, 4, 7],
  [0, 3, 6],
]


startGame();


function startGame() {
  document.querySelector('.endgame').style.display = "none";
  for (var i = 0; i < cells.length; i++) {
    cells[i].innerText = '';
    cells[i].style.removeProperty('background-color');
    cells[i].addEventListener('click', changeTurn)
  }
}


function changeTurn(square) {
  console.log("square# " + square.target.id);
  console.log("Player " + players[turn]);

  let squareId = square.target.id;


  if (squareId.innerText = "" ) {
  document.getElementById(squareId).innerText = players[turn] ;
  if (turn == 0) {turn = 1;
} else { turn = 0; }

  }

}

【问题讨论】：

您可以在第一次点击后从单元格中删除事件监听器。
你需要使用if (squareId.innerText == "" )（比较）而不是if (squareId.innerText = "" )（赋值）！然后，它会工作得很好，你的方法很好。

标签： javascript html

【解决方案1】：

点击后你甚至可以移除监听器，这样元素就不会再监听了：

function changeTurn(square) {
    square.target.removeEventListener('click', changeTurn);
    // the rest
}

【讨论】：

【解决方案2】：

尝试在单击单元格时添加此 css 属性：

指针事件：无；

这将使单元格不可点击...

【讨论】：