0

I'm working in a simple tic tac toe game in the purpose of learning. I made 9 html divs with IDs from 1 to 9. I wrote below code to set click event listener for every element.

var default_board = ["0", "0", "0", "0", "0", "0", "0", "0", "0"]
board = default_board
var available_plays = [1, 2, 3, 4, 5, 6, 7, 8, 9]
turn = 'X'

function reset() {
    board = default_board;
    available_plays = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    turn = 'X'
}

var columns = []

for(var i=1;i <= 9;i++) {
    col = document.getElementById(i.toString());
    columns.push(col)
}

for(var i=0;i<=8;i++) {
    columns[i].addEventListener('click', () => {
        console.log(col.id);
    })
}

Whenever I try to click any of the elements (to check its id) it logs 9. I can add event listeners for every single element, but isn't there a better solution?

Barmar
  • 741,623
  • 53
  • 500
  • 612
tfk
  • 13
  • 4

0 Answers0