如何统计一个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;

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

How to count multiple eventListener in one JS file?

javascript

dom

event-listener

tic-tac-toe