Javascript how to get the id of the button that was just clicked

Question

I have some Javascript, and in one function, I need to get the id of the button that was just clicked. I tried a few things, like this:

var e = window.event,
btn = e.target || e.srcElement;
alert(btn.id);

but that just causes my program to crash.

And this:

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

that also just causes my program to crash.

And this:

function functionName(clicked_id) {
    alert(clicked_id);
}

that just alerts "undefined".

If I could have some debugging help or just another way to do it, that would be helpful, but it can't have jquery.

Thanks

Answer 1

If you're using addEventListener() , then this will point to the DOM object that originated the event and this.id will be that object's id value.

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function(e) {
        alert(this.id);
    });
}

Working demo: http://jsfiddle.net/jfriend00/7frQ5/

You also need to change your for loop end condition to just < , not <= because you were going off the end of the array.

---

If you need support for browsers older than IE 9, you can use this cross browser event function:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}

var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
    addEvent(buttons[i], "click", function(e) {
        alert(this.id);
    });
}

Answer 2

In your for loop the value of i should be < than the length not <= ...

try this:

for (var i = 0; i < buttonsCount; i++) {

Example

Apart from that your code works good:

var buttons = document.getElementsByTagName("button"); // target all buttons into a element array/collection
var buttonsCount = buttons.length; // cache the length
for (var i = 0; i < buttonsCount; i++) { // reset the counter; check if its smaller than the array length; add itself
    buttons[i].onclick = function(e) { // assign a function to the onclick event
        alert(this.id); // alert the id attribute of the element clicked 
    };
}

Answer 3

function testClick(id){
  alert(id);
}

<a href="javascript:void(0);" id="test" onclick="testClick(id)"> Click</a>

Answer 4

Looking at the first attempt you have made I believe you can do something along the lines of:

Say for an example you have the following html

<div id="testId" onClick ="doStuff(event)"> click me </div>

You can get the id attribute of the element where the onclick event originated within the "doStuff":

function doStuff(event){
    event = event || window.event; 
    var element = event.target || event.srcElement; 
    if (element.nodeType == 3){
       element = element.parentNode;
    }
    var id = element.id;
    alert(id);//This will contain the value of the id attribute of the above DIV element, "testId"
}

Note: that the window.event and event.srcElement are Microsoft's implementation of accessing the last event that took place, and the element where this event was triggered from respectively.

And the if statement to check the node type is there to prevent a certain issue that can occur with safari, that is: if the event took place in a element that contains text, then this text node becomes the element where this event took place, so to workaround this we can check the node type, and if it is a text node we fall back to its parent node.

You can learn more about events by following this link: http://www.quirksmode.org/js/events_properties.html

This is a good reference to available node types: Node Types

Hope this helps to clarify the issues you are having.