Know from which cell was clicked

images in a 8x8 table with onclick event

[purefan]

hello.
I have a table with 64 squares representing a chess board.
on some squares I have images (for the pieces) and I am trying to allow the user to do a click-click and move the piece to its new location.
The <TD> have been IDed (from a to h for the columns and 1 to 8 for the rows).
I approached it by setting the onclick event on the images but it doesnt give me the id of its container <TD>.
here is my last try:

<td id="a8" bgcolor="#FFFFFF"><img src="bitmaps/trans/br2.gif" onClick="getmove(window.event.srcElement.id);"></td>

the function getmove only shows an alert with parameter for testing purposes. I read somewhere about this srcElement.id but my firefox says that srcElement has no properties.

in short: how do I get the ID of the <td> containing the onclicked image?

[gph]

I don't think the approach is correct. If you want to move the image you need a reference to it and the td.

onclick="getmove(this)"

then in the function

function getmove(img){
var td=img.parentNode;
...
}

[purefan]

thank you for posting.
I found another way:

<td id="a8" onClick="getmove(this.id);" bgcolor="#FFFFFF"><img src="bitmaps/trans/br2.gif"></td>

to add the onclick to the TD itself.

this is working for me but I will give it a try to your code a bit later.
Thanks again!

[Bernard Marx]

Since you are likely to only be using the

id

to get a reference to the clicked element using

getElementById

, you might as well just pass the ref itself (

this

), as suggested, and save the effort.