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

Question

我是JavaScript新手。 目前，我正在用Ruby构建一个简单的游戏“井字游戏”，但不幸的是，它停留在这里。

我有这样的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”开始。 问题是，我不确定如何像在现实世界中的Tic Tac Toe游戏中那样使eventListener显示“ X”，“ O”，“ X”，“ O”顺序。

想知道我有什么方法可以使用它，还是最好重构所有代码？ 先感谢您！

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;