Reporting Which Button Was Clicked when Clicked

Question

When I click on a button, I want to get the id of the button that was clicked. How can I do that with JavaScript?

For example:

<input type="button" id="1" class="buttonID" value="answer" onClick=myFunction() />
<input type="button" id="2" class="buttonID" value="answer" onClick=myFunction() />
<input type="button" id="3" class="buttonID" value="answer" onClick=myFunction() />

have you tried passing this.id as parameter to onclick fucntion? — Keyur Shah, Nov 11 '16 at 11:17
#BlackHammer, All replies are code currect, what is wrong? u need make one function with element to value ID. Show a example ur question? — KingRider, Nov 11 '16 at 12:38

shv22 · Answer 1 · 2016-11-11T11:25:14.783

-1

 This will alert "clicked" when a button with id my-button is clicked:

    HTML



 <button id="buttonID">Click me</button>

    JavaScript

    var el = document.getElementById("buttonID");

    if (el.addEventListener) {
        el.addEventListener("click", function() {
            alert("Clicked " + el.id);
        }, false);
    } else { //IE8 support
        el.attachEvent("onclick", function() { 
            alert("Clicked " + el.id);
        });
    }

edited Nov 11 '16 at 11:25

answered Nov 11 '16 at 11:18

shv22

680
5
28

If you log the ID of the button like he wants, this'd be a better solution than mine. – Joshua Nov 11 '16 at 11:21
I can't see it. Those should be `alert("Clicked " + el.id)`. – Joshua Nov 11 '16 at 11:24
@JoshCrowe changed.... – shv22 Nov 11 '16 at 11:26
This won't work for multiple buttons in the page. Using this approach, it would be needed to set a range of elements (var el1, el2, el3...), one for each button. It's not scalable. – Christian Benseler Nov 11 '16 at 11:30
Actually, I answered looking to his question where he has all the button id as same – shv22 Nov 11 '16 at 11:32

score -1 · Answer 2 · answered Nov 11 '16 at 11:20

-1

You can assign the button to a variable, and then target the ID of the button through that variable.

var button = document.getElementById('myButton');

button.onclick = function() {
    alert(button.id);
}

answered Nov 11 '16 at 11:20

Joshua

648
7
18

score -1 · Answer 3 · answered Nov 11 '16 at 11:27

-1

The function passed to the onclick event receives an 'event' object in the scope. You can access it's target element, and then the id

window.myFunction = function() {
    console.log(event.target.id)
}

answered Nov 11 '16 at 11:27

Christian Benseler

7,907
8
40
71

score -1 · Answer 4 · answered Nov 11 '16 at 11:33

You need to define function in your header (or JS file call in your header) otherwise this function will be undefined onclick event and you need to add 'this' param to function (for binding clicked element), like this:

<script>
function myFunction(e){
  alert(e.id);
}
</script>

<input type="button" id="1" class="buttonID" value="answer" onClick=myFunction(this) />
<input type="button" id="2" class="buttonID" value="answer" onClick=myFunction(this) />
<input type="button" id="3" class="buttonID" value="answer" onClick=myFunction(this) />

Here is code on JsFiddle: https://jsfiddle.net/kv8y4q24/

Reporting Which Button Was Clicked when Clicked

4 Answers4