homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Know from which cell was clicked
images in a 8x8 table with onclick event

5+ Year Member

Msg#: 4798 posted 3:58 pm on Dec 24, 2005 (gmt 0)

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?



10+ Year Member

Msg#: 4798 posted 4:40 pm on Dec 24, 2005 (gmt 0)

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


then in the function

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


5+ Year Member

Msg#: 4798 posted 7:51 pm on Dec 24, 2005 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member

Msg#: 4798 posted 1:30 am on Dec 25, 2005 (gmt 0)

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.
Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved