Here i have four input buttons and i want to add event handler for each of them.If i use for loop i have to deal with closures.Actually i am trying to understand how to manage forEach method for array like object.This is the closest solution i can manage.As we have to encounter closure related problem if we want to use array methods.I had to use object.keys to get the indexes and applied forEach on them.Though it sounds strange but i am not quite satisfied with this solution.Can it be more simpler?How can i manage forEach directly on the nodeList stored in Buttons variable

function change(){
    var buttons=document.getElementsByTagName('input');
    var keys=Object.keys(buttons);

    keys.forEach(function(el,indx,arr){
        if(el != 'length'){
            this[el].addEventListener('click', function(e){ 
                alert(e.target.value);
            });
        }
    }, buttons);
}

change();

<input type='button' value='button1'> 
<input type='button' value='button2'> 
<input type='button' value='button3'> 
<input type='button' value='button4'> 

Here i have four input buttons and i want to add event handler for each of them.If i use for loop i have to deal with closures.Actually i am trying to understand how to manage forEach method for array like object.This is the closest solution i can manage.As we have to encounter closure related problem if we want to use array methods.I had to use object.keys to get the indexes and applied forEach on them.Though it sounds strange but i am not quite satisfied with this solution.Can it be more simpler?How can i manage forEach directly on the nodeList stored in Buttons variable

function change(){
    var buttons=document.getElementsByTagName('input');
    var keys=Object.keys(buttons);

    keys.forEach(function(el,indx,arr){
        if(el != 'length'){
            this[el].addEventListener('click', function(e){ 
                alert(e.target.value);
            });
        }
    }, buttons);
}

change();

<input type='button' value='button1'> 
<input type='button' value='button2'> 
<input type='button' value='button3'> 
<input type='button' value='button4'> 

• javascript
• arrays
• foreach
• nodelist

• Check out NodeList.js – Edwin Reynoso Commented Aug 8, 2015 at 13:41

2 Answers 2

document.getElementsByTagName returns you a "host object". These objects can differ in behavior between browsers.

buttons is a NodeList, not an array. Object.keys may not work as expected here because it might have more properties than just the indexes and length.

The docs for NodeList (https://developer.mozilla/en-US/docs/Web/API/NodeList) have some examples to convert it into an array and how to use it with .forEach.

The method I normally use isn't listed on the docs page. I usually use:

var arr = Array.prototype.slice.call(buttons);

_{See this question for more info: Fastest way to convert JavaScript NodeList to Array?}

Then you can do:

arr.forEach(function(el){
    el.addEventListener('click', function(e){ 
        alert(e.target.value);
    });
});

Here's a demo:

var buttons = document.getElementsByTagName('input');
var arr = Array.prototype.slice.call(buttons);
arr.forEach(function(el) {
  el.addEventListener('click', function(e) {
    alert(e.target.value);
  });
});

<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>

ES6 Solution

The ES6 Array.from method can convert array-like object to an array :

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

    Array.from(buttons).forEach(el=>{
      el.addEventListener('click', e =>{
        alert(e.target.value);
      });
    });

<input type='button' value='button1'>
<input type='button' value='button2'>
<input type='button' value='button3'>
<input type='button' value='button4'>