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.");
} 
}
    }

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.");
} 
}
    }

• javascript
• cross-browser
• addeventlistener

Share Improve this question Follow asked Feb 3, 2015 at 2:46 exeleonexeleon 12111 gold badge22 silver badges1414 bronze badges 1

• Does this answer your q?: stackoverflow./questions/4825295/… – Q A Commented Feb 3, 2015 at 2:55

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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.

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.

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.

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