CODEWITHSUNDEEP
javascript
JJJ
JJJ

Reputation: 3332

Add Event Listener to Collection of HTML Elements

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.

Upvotes: 11

Views: 23224

Answers (8)

Adi
Adi

Reputation: 6354

Try querySelectorAll method.

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

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

Upvotes: 4

Rinoy R K
Rinoy R K

Reputation: 19

var i=0, inputElem = document.getElementsByTagName('input'), len = inputElem.length;    
while(i < len){
  inputElem[i].addEventListener('click', function(){
      alert(this.value);
  }, false);
 i++;
}

Upvotes: 0

Rakesh_Kumar
Rakesh_Kumar

Reputation: 1442

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.

Upvotes: 9

Derrick Dennis
Derrick Dennis

Reputation: 148

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

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

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

Upvotes: 2

atxpunkrock
atxpunkrock

Reputation: 514

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/

Upvotes: 8

Alok Ranjan
Alok Ranjan

Reputation: 100

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; 
}
// ...

Upvotes: 0

Rutwick Gangurde
Rutwick Gangurde

Reputation: 4912

You can use the class too as a selector.

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

Then loop over these to attach event handlers.

Upvotes: 0

Related Questions