CODEWITHSUNDEEP
javascripthtml
Rajat Gupta
Rajat Gupta

Reputation: 26587

How to pass the id of an element that triggers an `onclick` event to the event handling function

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)" />

Upvotes: 61

Views: 243796

Answers (7)

Jenil J
Jenil J

Reputation: 3

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>

Upvotes: 0

jbrookover
jbrookover

Reputation: 5150

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/

Upvotes: 132

Saeed Neamati
Saeed Neamati

Reputation: 35822

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).

Upvotes: 2

Arun
Arun

Reputation: 1085

<!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>

Upvotes: 2

mrmoje
mrmoje

Reputation: 3732

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">&rarr; Click Here! &larr;</div>

Script:

function myHandler(){
    alert(myHandler.caller.arguments[0].target.id)
}

Demo: http://codepen.io/mrmoje/pen/ouJtk

Upvotes: 8

Felix Kling
Felix Kling

Reputation: 816334

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).

Upvotes: 18

Oliver M Grech
Oliver M Grech

Reputation: 3171

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 :)

Upvotes: 4

Related Questions