I would like to add a click eventlistener on each row elements of the table-CodePudding

I created a 3x3 table for my tic-tac-toe game using the table tag and i added a click event listener to the each of the row using forEach loop but unfortunately nothing is showing in my console

const boxes = document.querySelectorAll('.box');
const strategy = document.querySelector('#strategy');
const restartBtn = document.querySelector('#restart');
const arry = [];
const tick_x = 'X';
const tick_o = 'O';
const userAction = () => {
  boxes.forEach((box) => {
    box.addEventListener('click', function clk() {
      console.log("clicked")
    })
  })
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: teal;
  overflow: hidden;
  font-family: "Itim", cursive;
}

.game {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  text-align: center;
  margin: 40px auto;
  width: 200px;
}

table {
  margin-bottom: 50px;
  border-radius: 10px;
  border-top: 2px solid white;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}

button {
  width: 100px;
}

h1 {
  width: 100%;
  height: 100%;
  text-align: center;
}

.row1 td {
  width: 100px;
  height: 100px;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

.row2 td {
  width: 100px;
  height: 100px;
  border-bottom: 1px solid white;
  border-left: 1px solid white;
}

.row3 td {
  width: 100px;
  height: 100px;
  border-left: 1px solid white;
}

.r11 {
  border-left: none;
}

<div >
  <p >TIC-TAC-TOE</p>
  <h2 id="strategy"></h2>
  <p >Player X'S turn</p>
</div>
<table>
  <tr >
    <td >
      <h1  id="0"> </h1>
    </td>
    <td >
      <h1  id="1"> </h1>
    </td>
    <td >
      <h1  id="2"> </h1>
    </td>
  </tr>
  <tr >
    <td >
      <h1  id="3"> </h1>
    </td>
    <td >
      <h1  id="4"> </h1>
    </td>
    <td >
      <h1  id="5"> </h1>
    </td>
  </tr>
  <tr >
    <td >
      <h1  id="6"> </h1>
    </td>
    <td >
      <h1  id="7"> </h1>
    </td>
    <td >
      <h1  id="8"> </h1>
    </td>
  </tr>
</table>
<button id="restart"><h3>Reset</h3></button>
</div>

CodePudding user response：

You never call userAction, so you can either call it or wrap it in a closure and call it (as below)

const boxes = document.querySelectorAll('.box');
const strategy = document.querySelector('#strategy');

const restartBtn = document.querySelector('#restart');

const arry = [];

const tick_x = 'X';

const tick_o = 'O';

(() => {

boxes.forEach((box) => {
    box.addEventListener('click', function clk () {
        
        console.log("clicked")
    })
})
})()

html{

height: 100%;
} body{

margin: 0;
padding: 0;
background-color: teal;
overflow: hidden;
font-family: "Itim", cursive;
}

.game{ display: flex; flex-direction: column; justify-content: center; align-items: center; } p{ color: white; text-align: center; margin: 40px auto; width: 200px; }

table{

margin-bottom: 50px;
border-radius: 10px;
border-top: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid white;
border-right: 2px solid white;
}

button{

width: 100px;
} h1{ width: 100%; height: 100%; text-align: center;

}

.row1 td{

width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}

.row2 td{

width: 100px;
height: 100px;
border-bottom: 1px solid white;
border-left: 1px solid white;
}

.row3 td{

width: 100px;
height: 100px;
border-left: 1px solid white;
}

.r11 {

border-left: none;
}

<!DOCTYPE html>
<head></head>
<body>
<div >
        <p >TIC-TAC-TOE</p>
        <h2 id="strategy"></h2>
        <p >Player X'S turn</p>
    </div>
    <table>
        <tr >
            <td ><h1 class = "box" id ="0"> </h1></td>
            <td ><h1 class = "box" id ="1"> </h1></td>
            <td ><h1 class = "box" id ="2"> </h1></td>
        </tr>
        <tr >
            <td ><h1  id ="3"> </h1></td>
            <td ><h1  id ="4"> </h1></td>
            <td ><h1  id ="5"> </h1></td>
        </tr>
        <tr >
            <td ><h1  id ="6"> </h1></td>
            <td ><h1  id ="7"> </h1></td>
            <td ><h1  id ="8"> </h1></td>
        </tr>
    </table>
    <button id="restart"><h3>Reset</h3></button>
</div>

</body>

CodePudding user response：

You create the userAction function, but never call it. Add at the end:

userAction()