如何獲取由二維數組（JS）制成的網格的坐標？

Question

期望的結果：

我想通過打印代表瓷磚的400張圖像來創建20x20的地圖。 然后，我希望能夠單擊這些圖像並收到警報，告訴我該圖塊的相應坐標。

問題/錯誤：

無論我單擊哪個圖塊，警報消息始終顯示x：19，y19，我假設這是僅生成的最后一個圖塊。 我猜想在分配值時我做錯了什么。

我如何嘗試的：

我正在使用兩個for循環將20 x 20元素的網格創建為二維數組。 我使用此代碼使其所有元素等於0。

    for (j = 0; j < 20; j++)
{   
    for (i = 0; i < 20; i++)
    { 
        mapxy[j][i] = 0;
    }
}

之后，我創建了另外兩個for循環來遍歷所有這些元素並依次打印它們的值（我在前兩個fors中不這樣做以保持模塊化方法）：

    for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";
    }
    document.getElementById("map").innerHTML += "</br>";
}   

請注意onclick =“ tileclick（k，m）”之后，我定義了此函數的實際作用（顯示坐標）：

function tileclick(k,m)
{
    alert('x: ' + k + ' y: ' + m);
}

任何幫助將不勝感激。 謝謝你的時間。

Answer 1

您正在使用全局變量(k and m)因此您的代碼可以正常工作（這意味着不崩潰），但此部分很混亂：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick(k,m)\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

單擊圖像時，將使用k和m變量調用tileclick 。 此時， k = 19 ， m = 19 （循環后）。 這就是為什么您收到19,19 alert的原因。 一種解決方案是通過以下方式更改生產線：

document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\"/>";

Answer 2

以下代碼可以按您的意願工作，但是我不建議您這樣做，因為它沒有經過優化。 由於大多數DOM方法（包括getElementById和innerHTML）都是高成本函數，因此最好避免盡可能多地調用它們。

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        document.getElementById("map").innerHTML += "<img onclick=\"tileclick("+k+","+m+")\" src=\"" + tiletype[mapxy[k][m]] + "\" />";
    }
    document.getElementById("map").innerHTML += "<br />";
}

很少優化：

var content = '';

for (m = 0; m < 20; m++)
{
    for(k = 0; k < 20; k++)
    {
        content += '<img onclick="tileclick('+k+','+m+')" src="' + tiletype[mapxy[k][m]] + '" />';
    }
    content += '<br />';
}
document.getElementById("map").innerHTML = content;