How do I pass the id of an element that triggers an onclick event to the event handling function.
I am doing something like this-
<link onclick="doWithThisElement(id_of_this_element)" />
This question is related to
javascript
html
Use this:
<link onclick='doWithThisElement(this.attributes["id"].value)' />
In the context of the onclick JavaScript, this refers to the current element (which in this case is the whole HTML element link).
Here's a non-standard but cross-browser method that may be useful if you don't want to pass any arguments:-
Html:
<div onclick=myHandler() id="my element's id">→ Click Here! ←</div>
Script:
function myHandler(){
alert(myHandler.caller.arguments[0].target.id)
}
I would suggest the use of jquery mate.
With jQuery you would then be able to get the id of this element by
$(this).attr('id');
without jquery, if I remember correctly we used to access the id with a
this.id
Hope that helps :)
The element that triggered the event can be different than the one you bound the handler to because events bubble up the DOM tree.
So if you want to get the ID of the element the event handler is bound to, you can do this easily with this.id (this refers to the element).
But if you want to get the element where the event originated, then you have to access it with event.target in W3C compatible browsers and event.srcElement in IE 8 and below.
I would avoid writing a lot of JavaScript in the onXXXX HTML attributes. I would only pass the event object and put the code to extract the element in the handler (or in an extra function):
<div onlick="doWithThisElement(event)">
Then the handler would look like this:
function doWithThisElement(event) {
event = event || window.event; // IE
var target = event.target || event.srcElement; // IE
var id = target.id;
//...
}
I suggest to read the excellent articles about event handling at quirksmode.org.
Btw
<link onclick="doWithThisElement(id_of_this_element)" />
does hardly make sense (<link> is an element that can only appear in the <head>, binding an event handler (if even possible) will have no effect).
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick(event)
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var target = event.target || event.srcElement; // IE
console.log(target);
console.log(target.id);
var img = document.createElement('img');
img.setAttribute('src', target.src);
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img id="muID1" src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
<img id="myID2" src="sabaLogo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick(event)" />
</body>
</html>
Source: Stackoverflow.com