onclickイベントをJavaScriptのテーブルtdにカウンタを追加する

Question

クリックイベントにカウンタを追加することに興味があります。いくつかの試行されたクリックの後、私はそれらを防ぎ、再始動したいと思います。私は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

をあなたのコードに[i]のLOCを削除し、それを変更する - 1最後の問題、あなたのLOCは時々、グリッドよりも大きな値を持つことになります。それに取り組む方法を決める必要があります。また

あなたはONE 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

ループのための宣言の後に何か問題があります。私はあなたがこれを行うためのものだと思い

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"); 
    } 
}