apply forEach method on array like objects in javascript

Question

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

Check out [NodeList.js](https://github.com/eorroe/NodeList.js) — Edwin Reynoso, Aug 08 '15 at 13:41

score 4 · Accepted Answer · edited May 23 '17 at 11:48

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.org/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'>

AL-zami · Answer 2 · 2020-09-20T05:15:29.873

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

apply forEach method on array like objects in javascript

2 Answers2

Linked

Related