How to pass the id of an element that triggers an `onclick` event to the event handling function
JavascriptHtmlJavascript Problem Overview
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)" />
Javascript Solutions
Solution 1 - Javascript
Instead of passing the ID, you can just pass the element itself:
<link onclick="doWithThisElement(this)" />
Or, if you insist on passing the ID:
<link id="foo" onclick="doWithThisElement(this.id)" />
Here's the JSFiddle Demo: http://jsfiddle.net/dRkuv/
Solution 2 - Javascript
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).
Solution 3 - Javascript
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)
}
Solution 4 - Javascript
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 :)
Solution 5 - Javascript
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).
Solution 6 - Javascript
<!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>
Solution 7 - Javascript
> if click any button, it will be call the function and add classList > active class
<label for="natural" id="natural" class="Natural" onclick="showContent(this)">Natural</label>
<label for="labgrown" id="labgrown" class="Labgrown" onclick="showContent(this)">Labgrown </label>
<label for="fancyColor" id="fancy" class="Fancy" onclick="showContent(this)">Fancy</label>
<script>
function showContent(event) {
$(event).addClass("active");
console.log(jenil);
}
</script>