Adding onclick events with counter to a table td in JavaScript

Question

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 1

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>

Answer 2

There is something wrong after the for loop declaration. Remove the loc[i] on your code and change it to i

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[i].onclick = function() {
    this.style.color = 'red';
    this.textContent = 'X';
    counter += 1;
    if (counter == 10) {
       alert("Game Over");
    }
}