クリックイベントのJavascript表のセル？

Question

私はすべてのセルでクリック機能を持つゲームボードを作ろうとしていますが、セルをクリックするたびに影響を受けるのは最後のセルだけです。 私はこれについていくつかの助けに感謝します。テーブルの はHERESに私のコード：

var board = document.getElementById("board"); 
var NUM_ROWS = 6; 
var NUM_COLS = 6; 
for (row = 0; row < NUM_ROWS; row++) { 
    var tr = document.createElement("tr"); 
    for (col = 0; col < NUM_COLS; col++) { 
    var td = document.createElement("td"); 
    var img = document.createElement("img"); 
    img.src = 'images/image0.png'; 
    td.appendChild(img); 
    td.addEventListener("click", function() { 
     img.src = 'images/image1.png'; 
    }); 
    tr.appendChild(td); 
    } 
    board.appendChild(tr); 

} 

Answer 1

がdocument.body.childNodes[0];を使用して最初のimg子を指定する必要があり。

td.addEventListener("click", function() { 
     var img = this.childNodes[0]; 
     img.src = 'images/image1.png';//use this not img 
    }); 

ソリューション：

var board = document.getElementById("board"); 
 
var NUM_ROWS = 6; 
 
var NUM_COLS = 6; 
 
for (row = 0; row < NUM_ROWS; row++) { 
 
    var tr = document.createElement("tr"); 
 
    for (col = 0; col < NUM_COLS; col++) { 
 
    var td = document.createElement("td"); 
 
    var img = document.createElement("img"); 
 
    img.src = 'images/image0.png'; 
 
    td.appendChild(img); 
 
    td.addEventListener("click", function() { 
 
     var img = this.childNodes[0]; 
 
     console.log('Source Before Clicking'); 
 
     console.log(img.src); 
 
     img.src = 'images/image1.png';//use this not img 
 
     console.log('Source Afer Clicking'); 
 
     console.log(img.src); 
 
    }); 
 
    tr.appendChild(td); 
 
    } 
 
    board.appendChild(tr); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="board"> 
 

 
</div>