get id of clicked button javascript

Question

I'm attempting to simply get the id of a clicked button and use alert to display it. The code below trys to addEventListener, if not falls back to attachEvent. To get the ID, Im trying to pass this.id as a parameter to myFunction. but this is not working. I've seen plenty of great solutions using Jquery and the likes, but unfortunately I have to use only plain JS for this. How do I get the ID of a clicked button and store it in a variable to be displayed?

function addEvents()
{
    var buttonArray=document.getElementsByClassName('mainButton');
    for(i=0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
        buttonArray[i].addEventListener("click", myFunction(this.id));
        } else if (document.attachEvent) {
        buttonArray[i].attachEvent("onclick", myFunction(this.id));
}

function myFunction(clickedId) {
    alert("Button" + clickedId + "was clicked.");
} 
}
    }

Does this answer your q?: http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button — Q A, Feb 03 '15 at 02:55

score 5 · Accepted Answer · answered Feb 03 '15 at 03:09

Actually you didn't need to pass an argument to myFunction. That is a callback function and you can use the event variable.

function addEvents()
{
    var buttonArray = document.getElementsByClassName('mainButton');
    for(i = 0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
            buttonArray[i].addEventListener("click", myFunction);
        } 
        else { 
            if (document.attachEvent) {
                buttonArray[i].attachEvent("onclick", myFunction);
            }
        }
    }
}

function myFunction(e) {
    alert("Button " + e.target.id + " was clicked.");
}

Here is the jsfiddle.

Someone did reply with something really similar to this but I'm selecting this as the answer mainly because you pointed out myFunction() being in the for loop. Thank you! — exeleon, Feb 03 '15 at 18:47

score 0 · Answer 2 · answered Feb 03 '15 at 03:02

You need to modify your code as follows:

function addEvents()
{
    var buttonArray = document.getElementsByClassName('someclass');

    for(i=0; i < buttonArray.length; i++)
    {
        if (document.addEventListener) {
          buttonArray[i].addEventListener("click", myFunction);
        } else if (document.attachEvent) {
          buttonArray[i].attachEvent("onclick", myFunction);
        }

        function myFunction(e) {
            alert("Button" + e.target.id + "was clicked.");
        }
    }
}

myFunction is the callback function, by using myFunction(id) you were calling the function thus defeating the purpose of the callback.

score 0 · Answer 3 · answered Feb 03 '15 at 03:05

Currently, this code loops through the mainButton buttons on the page, and for each button, calls myFunction and sets the event listener to be the return value of myFunction. Since myFunction returns nothing, then the event listener also gets set to nothing. Probably what you are looking for, instead, is something like this:

if (document.addEventListener) {
    buttonArray[i].addEventListener("click",
        function() { myFunction(this.id); });
}
else if (document.attachEvent) {
    buttonArray[i].attachEvent("onclick",
        function() { myFunction(this.id); });
}

It would also probably be preferrable to move the declaration of the myFunction to be outside the for loop.

score 0 · Answer 4 · answered Feb 03 '15 at 03:08

Try this:

Element.prototype.addEvent = function(eventName, callFunction) {
  if (this.addEventListener) this.addEventListener(eventName.substring(2), callFunction, false);
  else if (this.attachEvent) this.attachEvent(eventName, callFunction);
};


function clicked(e) { 
  alert(this.id);
}


document.getElementById('myButton').addEvent('onclick', clicked);

<input id="myButton" type="button" value="Click me">

get id of clicked button javascript

4 Answers4