如何计算一个JS文件中的多个eventListener？

Question

我是JavaScript的新手。目前，我正在用Ruby构建一个简单的游戏"Tic Tac Toe“，但不幸的是被困在这里了。

我的JS文件是这样的：

const initialBoard = document.getElementById('navbar-new');
initialBoard.addEventListener("click", (e) => {
  e.preventDefault();
  alert('Game starts!');
  grid_0.innerText = '';
  grid_1.innerText = '';
  grid_2.innerText = '';
  grid_3.innerText = '';
  grid_4.innerText = '';
  grid_5.innerText = '';
  grid_6.innerText = '';
  grid_7.innerText = '';
  grid_8.innerText = '';
});

const grid_0 = document.getElementById('grid-0');
grid_0.addEventListener("click", (e) => {
  e.preventDefault();
  grid_0.innerText = "X";
});

const grid_1 = document.getElementById('grid-1');
grid_1.addEventListener("click", (e) => {
  e.preventDefault();
  grid_1.innerText = "X"
});

const grid_2 = document.getElementById('grid-2');
grid_2.addEventListener("click", (e) => {
  e.preventDefault();
  grid_2.innerText = 'X';
});

const grid_3 = document.getElementById('grid-3');
grid_3.addEventListener("click", (e) => {
  e.preventDefault();
  grid_3.innerText = 'X';
});

const grid_4 = document.getElementById('grid-4');
grid_4.addEventListener("click", (e) => {
  e.preventDefault();
  grid_4.innerText = 'X';
});

const grid_5 = document.getElementById('grid-5');
grid_5.addEventListener("click", (e) => {
  e.preventDefault();
  grid_5.innerText = 'X';
});

const grid_6 = document.getElementById('grid-6');
grid_6.addEventListener("click", (e) => {
  e.preventDefault();
  grid_6.innerText = 'X';
});

const grid_7 = document.getElementById('grid-7');
grid_7.addEventListener("click", (e) => {
  e.preventDefault();
  grid_7.innerText = 'X';
});

const grid_8 = document.getElementById('grid-8');
grid_8.addEventListener("click", (e) => {
  e.preventDefault();
  grid_8.innerText = 'X';
});

我从假设所有9个网格都会在事件单击时显示'X‘开始。问题是我不知道如何让eventListener显示"X"，"O"，"X"，"O“的顺序，就像现实世界的Tic Tac Toe游戏一样。

我想知道有没有什么方法可以用来实现它，或者我最好重构我所有的代码？提前谢谢你！

Answer 1

您需要有一个flag来告诉您是打印X还是O

像这样的东西(还没有测试过)：

const initialBoard = document.getElementById('navbar-new');

let isXActive = true;

initialBoard.addEventListener("click", (e) => {
    e.preventDefault();
    alert('Game starts!');
    grid_0.innerText = '';
    grid_1.innerText = '';
    grid_2.innerText = '';
    grid_3.innerText = '';
    grid_4.innerText = '';
    grid_5.innerText = '';
    grid_6.innerText = '';
    grid_7.innerText = '';
    grid_8.innerText = '';
});

function print() {
    return isXActive ? "X" : "O";
}

function toggleXActive() {
    isXActive = !isXActive;
}

const grid_0 = document.getElementById('grid-0');
grid_0.addEventListener("click", (e) => {
    e.preventDefault();
    grid_0.innerText = print();
    toggleXActive();
});

const grid_1 = document.getElementById('grid-1');
grid_1.addEventListener("click", (e) => {
    e.preventDefault();
    grid_1.innerText = print();
    toggleXActive();
});

const grid_2 = document.getElementById('grid-2');
grid_2.addEventListener("click", (e) => {
    e.preventDefault();
    grid_2.innerText = print();
    toggleXActive();
});

const grid_3 = document.getElementById('grid-3');
grid_3.addEventListener("click", (e) => {
    e.preventDefault();
    grid_3.innerText = print();
    toggleXActive();
});

const grid_4 = document.getElementById('grid-4');
grid_4.addEventListener("click", (e) => {
    e.preventDefault();
    grid_4.innerText = print();
    toggleXActive();
});

const grid_5 = document.getElementById('grid-5');
grid_5.addEventListener("click", (e) => {
    e.preventDefault();
    grid_5.innerText = print();
    toggleXActive();
});

const grid_6 = document.getElementById('grid-6');
grid_6.addEventListener("click", (e) => {
    e.preventDefault();
    grid_6.innerText = print();
    toggleXActive();
});

const grid_7 = document.getElementById('grid-7');
grid_7.addEventListener("click", (e) => {
    e.preventDefault();
    grid_7.innerText = print();
    toggleXActive();
});

const grid_8 = document.getElementById('grid-8');
grid_8.addEventListener("click", (e) => {
    e.preventDefault();
    grid_8.innerText = print();
    toggleXActive();
});

Answer 2

谢谢@Varinder！:)

我只是用下面的代码整理了一下，这也是可行的：

const initialBoard = document.getElementById('navbar-new');
initialBoard.addEventListener("click", (e) => {
  e.preventDefault();
  alert('Game starts!');
  grid_0.innerText = '';
  grid_1.innerText = '';
  grid_2.innerText = '';
  grid_3.innerText = '';
  grid_4.innerText = '';
  grid_5.innerText = '';
  grid_6.innerText = '';
  grid_7.innerText = '';
  grid_8.innerText = '';
});

const grid_0 = document.getElementById('grid-0');
const grid_1 = document.getElementById('grid-1');
const grid_2 = document.getElementById('grid-2');
const grid_3 = document.getElementById('grid-3');
const grid_4 = document.getElementById('grid-4');
const grid_5 = document.getElementById('grid-5');
const grid_6 = document.getElementById('grid-6');
const grid_7 = document.getElementById('grid-7');
const grid_8 = document.getElementById('grid-8');

let currentPlayer = "X";

function ticTac(){
  if (this.innerText !== "X" || this.innerText !== "O") {
    this.innerText = currentPlayer;
    currentPlayer = currentPlayer == "X" ? "O" : "X";
  }
};

document.getElementById("grid-0").onclick = ticTac;
document.getElementById("grid-1").onclick = ticTac;
document.getElementById("grid-2").onclick = ticTac;
document.getElementById("grid-3").onclick = ticTac;
document.getElementById("grid-4").onclick = ticTac;
document.getElementById("grid-5").onclick = ticTac;
document.getElementById("grid-6").onclick = ticTac;
document.getElementById("grid-7").onclick = ticTac;
document.getElementById("grid-8").onclick = ticTac;