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

Question

Desired outcome:

I want to create a 20x20 map by printing 400 images representing the tiles. Then, I want to be able to click those images and receive an alert telling me the corresponding coordinate of that tile.

The Problem/Error:

No matter which Tile I click, the alert message always says x:19,y19, which I'm assuming is the last tile generated only. There is something im doing wrong when it comes to assigning the values, I would guess.

How I tried it:

I'm using two for loops to create a 20 by 20 elements grid into a two-dimensional array. I use this code to make all its elements equal to 0.

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

After that, I create another two for loops to go through all of these elements and print their values accordingly, one after the other (I don't do it in the first two fors to keep a modular approach):

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

please notice the onclick="tileclick(k,m)" After all this is done, i define what this function actually does (showing the coordinates):

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

Any help would be greatly appreciated. Thanks for your time.

Answer 1

You are using global variable (k and m) so you code is working (meaning no crash) but this part is messy:

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

You are calling tileclick with k and m variable when you click the image. At this time, k = 19 and m = 19 (after the loop). That's why you get an alert with 19,19 . One solution is to change your line by:

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

Answer 2

Following code will work as you want, but I don't recommend it because it isn't optimized. Because most of DOM methods including getElementById and innerHTML are high cost functions, you would be better to avoid calling them as much as possible.

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

Little optimized:

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;