onclick event using DOM

[legolas]

I have a number of tiny images, named marker, on my page created with this Javascript loop:var mypoints = xmlhttp.responseXML.getElementsByTagName('point');for (var i=0; i<mypoints.length; i++ ) { var marker = document.createElement('div'); var point = xmlhttp.responseXML.getElementsByTagNam('point').firstChild.nodeValue; marker.style.backgroundImage = 'url(dot.gif)'; marker.style.position = 'absolute'; marker.style.top = top.concat("px"); marker.style.left = left.concat("px"); marker.style.height = '10px'; marker.style.width = '10px'; marker.id = markid; marker.onclick = showDetails; document.body.appendChild(marker);}function showDetails() { // do some actions}When I click on one of the images I want to show some detailed information for this particular image.So with the line "marker.onclick=showDetails", an onclick calls the showDetails function. So far so good.But can this function retrieve properties of the clicked image? Can it know which imageI have clicked on?

[Ingolme]

function showDetails(e) {// This defines the element that fired the event_obj = (e.srcElement)?e.srcElement:e.target;// Do something with _obj}

[legolas]

strange piece of code...I would never have found out myself...but it works! Thanks a lot!

[jesh]

You may want to add one more line to that function:

function showDetails(e) {// This gets the event object regardless of browsere = (e) ? e : window.event;// This defines the element that fired the event_obj = (e.srcElement)?e.srcElement:e.target;// Do something with _obj}

[Ingolme]

You may want to add one more line to that function:

function showDetails(e) {// This gets the event object regardless of browsere = (e) ? e : window.event;// This defines the element that fired the event_obj = (e.srcElement)?e.srcElement:e.target;// Do something with _obj}

Is it really possible that the event is not recognised?

[jesh]

Is it really possible that the event is not recognised?

Yes. IE (version 6, at least) doesn't pass a reference to the event as a parameter to the function so "e" will be undefined. Instead, IE (v6) stores the event in the window.event object.

[legolas]

Well, when I said it worked in my previous post, I didn't try IE! *sigh*. In order to work in newer versions of IE, Firefox,Opera and Konqueror (haven't tried Safari), the following seems to work:marker.id = myID;marker.onclick = ShowDetails;function showDetails(e) {e = (e) ? e : window.event;_obj = (e.srcElement)?e.srcElement:e.target;var myMarkerId = _obj.id;...}