426

How do find the id of the button which is being clicked?

<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button> function reply_click() { }
Improve this question
1
  • 20
    @Robin van Baalen: ID's should not be numeric per convention, but they can be. Commented Jun 25, 2013 at 18:26

18 Answers 18

Reset to default
803

You need to send the ID as the function parameters. Do it like this:

<button id="1" onClick="reply_click(this.id)">B1</button> <button id="2" onClick="reply_click(this.id)">B2</button> <button id="3" onClick="reply_click(this.id)">B3</button> <script type="text/javascript"> function reply_click(clicked_id) { alert(clicked_id); } </script>

This will send the ID this.id as clicked_id which you can use in your function. See it in action here.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I just wanted to note, for anyone getting a null reference exception using JQuery's event.target.id (for me, both Firefox and IE were throwing it), this is a great solution that works in all three major browsers.
Brother , you are the only person on the internet that managed to interpret for me the way this works. Using a variable in the function name and than using another in the actual function script made absolutely no sense to me ! In one short sentence you explained to me that the variable we put in the function brackets () and the one we use on the function declaration are the same thing , just passed on AS ! This is brilliant ! Thank you my lord for the wisdom you have bestowed upon me
You don't really want any code in your html, like <button onClick="">
if (this.id == "1") { console.log("btn 1 is Activated"); }
@Brethlosze if your project is small, I guess nobody will complain. If it gets bigger, you want to separate your HTML from your code, so that two different people - the "HTML guy" and the "coder" for example - will be able to work independently. This is even truer when you are working in a big team.
|
86

USING PURE JAVASCRIPT: I know it's late but may be for the future people it can help:

In the HTML part:

<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button>

In the Javascipt Controller:

function reply_click() { alert(event.srcElement.id); }

This way we don't have to bind the 'id' of the Element at the time of calling the javascript function.

Improve this answer

6 Comments

I like this idea for dynamic functionality. I'm working on adding functions to a dynamic DB using PHP/MySQL and JS; this works out well for adding a specific function to specific dynamic classes. Thanks!
@codeling can you share the details of the browser and environment?
@Prateek Firefox, latest. I only needed the source, so I worked around it now by passing this as parameter in onClick (actually, not using onClick but onChange, is that maybe the problem?). I've also checked around a bit and there seems to be a lot of confusion about this event variable going around - is it an "implicit" parameter or does it have to be stated explicitly as argument (i.e. function reply_click(event), which I've also seen in some locations)? Is it only available when assigning the event listener via addEventListener...? I've played around, but couldn't get it to work.
FYI: The global event object is available in chrome, not firefox.
As of 2021, event.srcElement is deprecated.
|
83

In general, things are easier to keep organized if you separate your code and your markup. Define all of your elements, and then in your JavaScript section, define the various actions that should be performed on those elements.

When an event handler is called, it's called within the context of the element that was clicked on. So, the identifier this will refer to the DOM element that you clicked on. You can then access attributes of the element through that identifier.

For example:

<button id="1">Button 1</button> <button id="2">Button 2</button> <button id="3">Button 3</button> <script type="text/javascript"> var reply_click = function() { alert("Button clicked, id "+this.id+", text"+this.innerHTML); } document.getElementById('1').onclick = reply_click; document.getElementById('2').onclick = reply_click; document.getElementById('3').onclick = reply_click; </script>
Improve this answer

4 Comments

what if the buttons are in a repeater and therefore generated dynamically, so you dont know how many buttons you will have?
There are a number of ways you could handle that. For example, generate the javascript dynamically. Or, add the same class to all of the buttons, and then iterate through all buttons with that class name and attach the handler that way.
@JasonLeBrun I don't know what is the id of the element that I am gonna click. That's what I am looking for. A code draws a SVG element and when I click on it, I need to know it's "id" attribute. If and how can this code be used?
I know this is an old thread but on my modern browser (FireFox 78) your implementation of this did not work as intended. My function is triggered by an onkeyup event of an input text box, but this was using the window node. Instead, I had to use event.srcElement
49

(I think the id attribute needs to start with a letter. Could be wrong.)

You could go for event delegation...

<div onClick="reply_click()"> <button id="1"></button> <button id="2"></button> <button id="3"></button> </div> function reply_click(e) { e = e || window.event; e = e.target || e.srcElement; if (e.nodeName === 'BUTTON') { alert(e.id); } }

...but that requires you to be relatively comfortable with the wacky event model.

Improve this answer

9 Comments

This won't work. You've specified code in the onclick attribute that calls reply_click with no arguments. So, no event argument will be passed to the function.
And the value of the "id" attribute can be any string. It doesn't have to start with a letter.
@Jason Actually, in all the good modern browsers, the e argument is generated automatically. If it isn't, then we must be dealing with IE6-8, which instead provides that useful object via window.event.
@sdleihssirhc Actually, you arrogant so-and-so, that all changes with HTML5.
Thanks this worked for me even when my id were dynamic and no other answer seemed to work. Thanks a lot.
|
39 
<button id="1" onClick="reply_click(this)"></button> <button id="2" onClick="reply_click(this)"></button> <button id="3" onClick="reply_click(this)"></button> function reply_click(obj) { var id = obj.id; }
Improve this answer

Comments

26

How to do it without inline JavaScript or external libraries

it is generally recommended to avoid inline JavaScript, but rarely is there an example of how to do it.
Here is my way of attaching events to buttons.
I'm not entirely happy with how much longer the recommended method is compared to a simple onClick attribute.

Modern browsers (2015+)

  • Works before the document has finished loading.
  • Very efficient.
  • Separates JS from HTML.
  • JS is in the <head>

const Listen = (doc) => { return { on: (type, selector, callback) => { doc.addEventListener(type, (event)=>{ if(!event.target.matches(selector)) return; callback.call(event.target, event); }, false); } } }; Listen(document).on('click', '.btn', function (e) { let div = document.createElement("div"); div.innerHTML = "click " + e.target.id + "!"; document.body.appendChild(div); });
<button id="b1" class="btn">Button 1</button> <button id="b2" class="btn">Button 2</button> <button id="b3">Do nothing</button>

2014 browsers only

<button class="btn" id="b1">Button</button> <script> let OnEvent = (doc) => { return { on: (event, className, callback) => { doc.addEventListener('click', (event)=>{ if(!event.target.classList.contains(className)) return; callback.call(event.target, event); }, false); } } }; OnEvent(document).on('click', 'btn', function (e) { window.console.log(this.id, e); }); </script>

2013 browsers only

<!DOCTYPE html> <html> <head> <script> (function(doc){ var hasClass = function(el,className) { return el.classList.contains(className); } doc.addEventListener('click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault(); doSomething.call(e.target, e); } }); })(document); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>

Cross-browser

<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var cb_addEventListener = function(obj, evt, fnc) { // W3C model if (obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } // Microsoft model else if (obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } // Browser don't support W3C or MSFT model, go on with traditional else { evt = 'on'+evt; if(typeof obj[evt] === 'function'){ // Object already has a function on traditional // Let's wrap it with our own function inside another function fnc = (function(f1,f2){ return function(){ f1.apply(this,arguments); f2.apply(this,arguments); } })(obj[evt], fnc); } obj[evt] = fnc; return true; } return false; }; var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } cb_addEventListener(doc, 'click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault ? e.preventDefault() : e.returnValue = false; doSomething.call(e.target, e); } }); })(document); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script type="text/javascript"> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>

Cross-browser with jQuery

<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function($){ $(document).on('click', '.click-me', function(e){ doSomething.call(this, e); }); })(jQuery); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script type="text/javascript"> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>

You can run this before the document is ready, clicking the buttons will work because we attach the event to the document.

Here is a jsfiddle
For some strange reason the insertHTML function does not work in it even though it works in all my browsers.

You can always replace insertHTML with document.write if you don't mind it's drawbacks

<script> document.write('<button class="click-me" id="btn1">Button 1</button>'); </script>

Sources:

Improve this answer

2 Comments

I'm always wondering how events can be as efficient (performance-wise) as inline onclicks. I guess they must be harder to keep track of?
depends on your class naming convention, if the convention is meaningful then it will be as easy to find as onclicks
24 
<button id="1" class="clickMe"></button> <button id="2" class="clickMe"></button> <button id="3" class="clickMe"></button> <script> $('.clickMe').click(function(){ alert(this.id); }); </script>
Improve this answer

Comments

18

If you don't want to pass any arguments to the onclick function, just use event.target to get the clicked element:

<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button> function reply_click() { // event.target is the element that is clicked (button in this case). console.log(event.target.id); }
Improve this answer

Comments

10

With pure javascript you can do the following:

var buttons = document.getElementsByTagName("button"); var buttonsCount = buttons.length; for (var i = 0; i < buttonsCount; i += 1) { buttons[i].onclick = function(e) { alert(this.id); }; }​

check it On JsFiddle

Improve this answer

2 Comments

Your code says: Uncaught TypeError: Cannot set property 'onclick' of undefined
that's because you have no buttons in your html
8

You can simply do it this way: 

<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/> <script type="text/javascript"> function showId(obj) { var id=obj; alert(id); }

Improve this answer

2 Comments

You could cut out the var id=obj; and just have alert(obj);
I think this should be the accepted answer, and "(this.id)" worked for me just now in FF, IE, and Chrome.
8 
<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button> function reply_click() { console.log(window.event.target.id) }
Improve this answer

Comments

7

This is improvement of Prateek answer - event is pass by parameter so reply_click not need to use global variable (and as far no body presents this variant)

function reply_click(e) { console.log(e.target.id); }
<button id="1" onClick="reply_click(event)">B1</button> <button id="2" onClick="reply_click(event)">B2</button> <button id="3" onClick="reply_click(event)">B3</button>

Improve this answer

5 Comments

Didn't two other users already post this as an answer?
@j08691 can You provide link to that answers - because I not see similar answer
stackoverflow.com/a/53084521/616443 and stackoverflow.com/a/39941379/616443
@j08691 answers in first and second link use GLOBAL (event) variable inside function reply_click
This is the right answer in 2024, as the global event property is deprecated.
7

First Way: Send trigger element using this

<button id="btn01" onClick="myFun(this)">B1</button> <button id="btn02" onClick="myFun(this)">B2</button> <button id="btn03" onClick="myFun(this)">B3</button> <script> function myFun(trigger_element) { // Get your element: var clicked_element = trigger_element alert(clicked_element.id + "Was clicked!!!"); } </script>

This way send an object of type: HTMLElement and you get the element itself. you don't need to care if the element has an id or any other property. And it works by itself just fine.

Second Way: Send trigger element id using this.id

<button id="btn01" onClick="myFun(this.id)">B1</button> <button id="btn02" onClick="myFun(this.id)">B2</button> <button id="btn03" onClick="myFun(this.id)">B3</button> <script> function myFun(clicked_id) { // Get your element: var clicked_element = document.getElementById(clicked_id) alert(clicked_id + "Was clicked!!!"); } </script>

This way send an object of type: String and you DO NOT get the element itself. So before use, you need to make sure that your element already has an id.

You mustn't send the element id by yourself such as onClick="myFun(btn02)". it's not CLEAN CODE and it makes your code lose functionality.

in your case:

<button id="1" onClick="reply_click(this.id)">B1</button> <button id="2" onClick="reply_click(this.id)">B2</button> <button id="3" onClick="reply_click(this.id)">B3</button> <script type="text/javascript"> function reply_click(clicked_id) { alert(clicked_id); } </script>
Improve this answer

Comments

4

Button 1 Button 2 Button 3

var reply_click = function() { alert("Button clicked, id "+this.id+", text"+this.innerHTML); } document.getElementById('1').onclick = reply_click; document.getElementById('2').onclick = reply_click; document.getElementById('3').onclick = reply_click;
Improve this answer

Comments

3 
 <button id="1"class="clickMe"></button> <button id="2" class="clickMe"></button> <button id="3" class="clickMe"></button> $('.clickMe').live('click',function(){ var clickedID = this.id; });
Improve this answer

1 Comment

There is no jQuery tag on the question, so you should mention how to include jQuery in your answer.
3

This will log the id of the element that's been clicked: addFields.

<button id="addFields" onclick="addFields()">+</button> <script> function addFields(){ console.log(event.toElement.id) } </script>
Improve this answer

Comments

3

Although it's 8+ years late, in reply to @Amc_rtty, to get dynamically generated IDs from (my) HTML, I used the index of the php loop to increment the button IDs. I concatenated the same indices to the ID of the input element, hence I ended up with id="tableview1" and button id="1" and so on.

$tableView .= "<td><input type='hidden' value='http://".$_SERVER['HTTP_HOST']."/sql/update.php?id=".$mysql_rows[0]."&table=".$theTable."'id='tableview".$mysql_rows[0]."'><button type='button' onclick='loadDoc(event)' id='".$mysql_rows[0]."'>Edit</button></td>";

In the javascript, I stored the button click in a variable and added it to the element.

function loadDoc(e) { var btn = e.target.id; var xhttp = new XMLHttpRequest(); var page = document.getElementById("tableview"+btn).value; //other Ajax stuff }
Improve this answer

Comments

1

Sorry its a late answer but its really quick if you do this :-

$(document).ready(function() { $('button').on('click', function() { alert (this.id); }); });

This gets the ID of any button clicked.

If you want to just get value of button clicked in a certain place, just put them in container like 

<div id = "myButtons"> buttons here </div>

and change the code to :-

 $(document).ready(function() { $('.myButtons button').on('click', function() { alert (this.id); }); });

I hope this helps

Improve this answer

2 Comments

I think myButtons is an id and you using it as a class selector in jquery with a dot(.) I think this should be start with #.
There is no jQuery tag on the question, so you should mention how to include jQuery in your answer.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.