Leyth Leyth - 15 days ago 4
Javascript Question

Adding onclick events with counter to a table td in JavaScript

I am interested in adding a counter to a click event; after a number of attempted clicks, I would like to prevent them and restart over. I considered adding a

div
by nesting the table inside of it, and it did not work. What is the simplest way of doing this?



var td = document.querySelectorAll("#td td");
var rand = Math.floor(Math.random() * 25) + 1;
var loc = [rand + 3, rand + 1, rand + 2];
var counter = 0;
for (var i = 0; i < td.length; i++) {
td[loc[i]].onclick = function() {
this.style.color = 'red';
this.textContent = 'X';
}
}
td.onclick = function() {
counter += 1;
if (counter == 10) {
alert("Game Over");
}
}

<div id="canvas">
<h1> Battleship</h1>
<table id="td">
<tr>
<td id="A1">W</td>
<td id="A2">W</td>
<td id="A3">W</td>
<td id="A4">W</td>
<td id="A5">W</td>
</tr>
<tr>
<td id="B1">W</td>
<td id="B2">W</td>
<td id="B3">W</td>
<td id="B4">W</td>
<td id="B5">W</td>
</tr>
<tr>
<td id="C1">W</td>
<td id="C2">W</td>
<td id="C3">W</td>
<td id="C4">W</td>
<td id="C5">W</td>
</tr>
<tr>
<td id="D1">W</td>
<td id="D2">W</td>
<td id="D3">W</td>
<td id="D4">W</td>
<td id="D5">W</td>
</tr>
<tr>
<td id="E1">W</td>
<td id="E2">W</td>
<td id="E3">W</td>
<td id="E4">W</td>
<td id="E5">W</td>
</tr>
</table>
</div>




Answer

I think you meant to do this - one last issue, your loc will sometimes have values larger than the grid. You need to decide how to tackle that.

Also you can have ONE onclick and check the cell's index against loc to see if you hit or not

var td = document.querySelectorAll("#td td");
var rand = Math.floor(Math.random() * 25) + 1;
var loc = [rand + 3, rand + 1, rand + 2];
console.log(rand,loc)
var counter = 0;


function checkCounter() {
  counter++;
  if (counter == 10) {
    alert("Game Over");
  }
}

for (var i = 0; i < td.length; i++) {
  if (loc.indexOf(i) !=-1) {
    td[i].onclick = function() {
      if (counter>= 10) return;
      this.style.color = 'red';
      this.textContent = 'X';
      checkCounter();
    }
  }
  else {
    td[i].onclick = function() {
      if (counter>= 10) return;      
      this.style.color = 'green';
      this.textContent = 'X';
      checkCounter();
    }
  }  
}
<div id="canvas">
  <h1> Battleship</h1>
  <table id="td">
    <tr>
      <td id="A1">W</td>
      <td id="A2">W</td>
      <td id="A3">W</td>
      <td id="A4">W</td>
      <td id="A5">W</td>
    </tr>
    <tr>
      <td id="B1">W</td>
      <td id="B2">W</td>
      <td id="B3">W</td>
      <td id="B4">W</td>
      <td id="B5">W</td>
    </tr>
    <tr>
      <td id="C1">W</td>
      <td id="C2">W</td>
      <td id="C3">W</td>
      <td id="C4">W</td>
      <td id="C5">W</td>
    </tr>
    <tr>
      <td id="D1">W</td>
      <td id="D2">W</td>
      <td id="D3">W</td>
      <td id="D4">W</td>
      <td id="D5">W</td>
    </tr>
    <tr>
      <td id="E1">W</td>
      <td id="E2">W</td>
      <td id="E3">W</td>
      <td id="E4">W</td>
      <td id="E5">W</td>
    </tr>
  </table>
</div>