（JavaScript）如何防止用户单击已被单击的井字游戏方块？

Question

I'm making a 2 player tic tac toe game and I can not find out how to prevent a player from clicking on a square that has already been clicked on.

I have tried adding if (squareId.innerText = "" ) but this doesn't seem to work. Any suggestions, please?

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; }

  }

}

Answer 1

try add this css property when a cell is clicked:

pointer-events: none;

this will make the cell not clickable...

Answer 2

You could remove even listener after clicking so element will not listen anymore:

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