11

I know that getElementsByTagName and getElementsByClassName need an index identifier in order for the objects to be bound to an event listener.

So the question is, how do I add an event listener to a collection of HTML elements found using getElementsByTagName or getElementsByClassName?

<input class="inputs" type="submit" value="Hello" />
<input class="inputs" type="submit" value="World" />

var inputElem = document.getElementsByTagName('input');
inputElem.addEventListener('click', function(){
    alert(this.value);
}, false);

I know how to do this in jQuery, but I want to know how to do it with pure JS.

8 Answers 8

9

Adding eventlistener to each of them is not advisable. May be this can help:

http://jsfiddle.net/b8gotLL6/

document.getElementById('parent').addEventListener('click', function(e){
alert(e.target.value);
})

And if you only want to do using getElementsByTagName or getElementsByClassName, then i guess you need to iterate for the array returned.

2
  • This is perfect. Instead of having to create a parent element, I used the body instead: document.body.addEventListenerjsfiddle.net/b8gotLL6/1
    – JJJ
    Jan 8, 2015 at 21:40
  • Never seen such a clean solution before. Thank you!
    – Koen
    Jan 16, 2021 at 18:07
7

It's pretty simple like @Rutwick Gangurde said. Once you get the elements you just need to loop through and attach the event.

var inputElem = document.getElementsByTagName('input');

for(var i = 0; i < inputElem.length; i++) {

    inputElem[i].addEventListener('click', function(){
        alert(this.value);
    }, false);
}

Here it is in a fiddle: http://jsfiddle.net/wm7p0a77/

4

Try querySelectorAll method.

var inputElem = document.querySelectorAll('input');

Which returns a NodeList and you can loop through the array to add the event listeners.

2
  • 1
    It returns an array-like structure called NodeList, not an Array. A NodeList doesn't have all the properties and methods that an Array does. It's a minor distinction, but it should be noted.
    – josh1978
    Jan 15, 2019 at 7:48
  • And besides, this is not answering the OP question which was to add an event listener to a collection of HTML elements not the elements themselves.
    – Jacques
    Dec 26, 2021 at 7:17
2

you can try like this:first get all the element of the particular type the loop through it.

var elems = document.getElementsByClassName('inputs');
for(var i = 0; i < elems.length; i++) {

    elems[i].addEventListener('click', function(){
        alert(this.value);
    }, false);
}
<input class="inputs" type="submit" value="Hello" />
<input class="inputs" type="submit" value="World" />

1

First, use getElementsByClassName, instead of getElementsByTagName. Then Loop through them, adding the event listener like this:

var inputElem = document.getElementsByClassName('inputs');
var i;
for (i = 0; i < inputElem .length; i++) {
    inputElem [i].addEventListener('click', (function(i) {
        return function() {
           alert(this.value);
        };
    })(i), false);
}

Here it is on jsfiddle

0

You can use the class too as a selector.

var elems = document.getElementsByClassName('inputs');

Then loop over these to attach event handlers.

0

You can use delegates to implement this. Get hold of a parent element to these inputs and add an event listener to that parent element. This way you will be just attaching one event and make use of event bubbling to accomplish your task. In that event listener, you might have to check the target of the event and if that target equals the input element, you can run your logic inside this condition.

You can do something like this in your event handler function.

// ...
// get event and source element e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== "input") {
    return; 
}
// ...
0
var i=0, inputElem = document.getElementsByTagName('input'), len = inputElem.length;    
while(i < len){
  inputElem[i].addEventListener('click', function(){
      alert(this.value);
  }, false);
 i++;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.