Добавление событий onclick с ответом на таблицу td в JavaScript

Question

Я заинтересован в добавлении счетчика в событие click; после нескольких попыток щелчка, я хотел бы предотвратить их и перезапустить. Я подумал о добавлении div, вложив в него таблицу, и это не сработало. Каков самый простой способ сделать это?

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

Я думаю, что вы имели в виду, чтобы сделать это - один последний вопрос, ваш LOC иногда имеют значения большие, чем сетка. Вам нужно решить, как это решить.

Также вы можете иметь один OnClick и проверить индекс ячейки против LOC, чтобы увидеть, если вы попали или нет

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

Существует что-то не так после того, как для объявления цикла. Удалите LOC [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"); 
    } 
}