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

I created a 3×3 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 class="intro">
  <p class="name">TIC-TAC-TOE</p>
  <h2 id="strategy"></h2>
  <p class="player">Player X'S turn</p>
</div>
<table>
  <tr class="row1">
    <td class="r11">
      <h1 class="box" id="0"> </h1>
    </td>
    <td class="r12">
      <h1 class="box" id="1"> </h1>
    </td>
    <td class="r13">
      <h1 class="box" id="2"> </h1>
    </td>
  </tr>
  <tr class="row2">
    <td class="r21">
      <h1 class="box" id="3"> </h1>
    </td>
    <td class="r22">
      <h1 class="box" id="4"> </h1>
    </td>
    <td class="r23">
      <h1 class="box" id="5"> </h1>
    </td>
  </tr>
  <tr class="row3">
    <td class="r31">
      <h1 class="box" id="6"> </h1>
    </td>
    <td class="r32">
      <h1 class="box" id="7"> </h1>
    </td>
    <td class="r33">
      <h1 class="box" id="8"> </h1>
    </td>
  </tr>
</table>
<button id="restart"><h3>Reset</h3></button>
</div>