メモリゲームボードの作成、javascript

Question

私はjavascriptでメモリゲームを作ろうとしていますが、ボードの作成に問題があります+テーブルデータに入っている画像にイベントハンドラ（クリック）を追加しています。

var board = document.getElementById("board"); 
var img = document.createElement("img"); 
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"); 
     tr.appendChild(td); 
     img.src = 'images/image0.png'; 
     tr.appendChild(img); 
    } 
    board.appendChild(tr); 
} 

Answer 1

これを行う方法はたくさんあります。あなたに多くの柔軟性を与える一つの方法は、あなたが必要なすべての機能を持つ画像要素の文字列バージョンを構築し、次のようにtd.innerHTMLを設定することで、あなたの表のセル要素に挿入することです：

function myclick(row,col) { 
    // handle the click here 
} 

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

この場合、img要素はonclick関数を組み込んで作成され、クリック処理の行と列をクリック処理関数に提供します。