How to count multiple eventListener in one JS file?

Question

I'm new to JavaScript. Presently I'm building a simple game "Tic Tac Toe" with Ruby but unfortunately stuck here.

I have my JS file like this:

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

I started from assuming all 9 grids would show 'X' on event click. The thing is I'm not sure how to make the eventListener display "X", "O", "X", "O" order like in a real-world Tic Tac Toe game.

Wondering is there any method I could use to make it or I'd better to refactor all of my code? Thank you in advance!

Answer 1

You'll want to have a flag that tells you whether to print X or O

Something like this (haven't tested this):

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