Javascript 如何获取由二维数组（JS）生成的网格的坐标？

预期结果：

我想通过打印400个代表瓷砖的图像来创建一个20x20地图。然后，我希望能够点击这些图像，并收到一个警报，告诉我相应的瓷砖坐标

问题/错误：

无论我单击哪个磁贴，警报消息总是显示x:19，y19，我假设这是仅生成的最后一个磁贴。我想，在赋值方面，我做错了一些事情

我是如何尝试的：

我使用两个for循环将一个20×20元素的网格创建成一个二维数组。我使用此代码使其所有元素都等于0

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

---

任何帮助都将不胜感激。谢谢您的时间。

您使用的是全局变量k和m，因此您的代码工作正常，这意味着没有崩溃，但这部分比较混乱：

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

---

下面的代码可以按照您的需要工作，但我不推荐它，因为它没有经过优化。因为大多数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;

---

为每个图像指定自定义属性可能更容易，例如，然后单击检索这些值。甚至，在你的代码中

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

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;