javascript for in loop returning undefinded

Question

Looking for help with a for in loop I am using in which returns undefined at the the end.

I have 26 buttons, one button for each letter in the alphabet. I need to scan through the buttons so that when a button is clicked I get the value of that button.

I'm using a class search which returns a node of all the buttons. On doing a console log this returns 26 buttons, which i would expect.

I then set up the for in loop to run through the buttons to add the o'clock to each, at the end of running through them though an undefined is getting added. Can anyone explain to me why as this is giving me a Type error of undefined.

Any ideas please?

 var item = document.getElementsByClassName('button'); console.log(item); //shows 26 buttons for (var i in Object.keys(item)) { console.log(item[i]) //shows 26 buttons and 1 undefined }; // final code should look like below for (var i in Object.keys(item)) { item[i].onclick = function() { console.log(this.value); }; } 

 <div id="container"> <header> <h1>Game</h1> </header> <div id="stage"> </div> <div id="buttons"> <input type="button" value="Q" id="Q" class="button"> <input type="button" value="W" id="W" class="button"> <input type="button" value="E" id="E" class="button"> <input type="button" value="R" id="R" class="button"> <input type="button" value="T" id="T" class="button"> <input type="button" value="Y" id="Y" class="button"> <input type="button" value="U" id="U" class="button"> <input type="button" value="I" id="I" class="button"> <input type="button" value="O" id="O" class="button"> <input type="button" value="P" id="P" class="button"><br> <input type="button" value="A" id="A" class="button"> <input type="button" value="S" id="S" class="button"> <input type="button" value="D" id="D" class="button"> <input type="button" value="F" id="F" class="button"> <input type="button" value="G" id="G" class="button"> <input type="button" value="H" id="H" class="button"> <input type="button" value="J" id="J" class="button"> <input type="button" value="K" id="K" class="button"> <input type="button" value="L" id="L" class="button"><br> <input type="button" value="Z" id="Z" class="button"> <input type="button" value="X" id="X" class="button"> <input type="button" value="C" id="C" class="button"> <input type="button" value="V" id="V" class="button"> <input type="button" value="B" id="B" class="button"> <input type="button" value="N" id="N" class="button"> <input type="button" value="M" id="M" class="button"> </div> </div> 

Answer 1

You should not use a for-in loop over a collection. If you do you need to test hasOwnProperty

Instead use a simple loop

var item = document.getElementsByClassName('button');
// or better: var item = document.querySelectorAll('.button');
for (var i=0;i<item.length;i++) {
  item[i].onclick = function(){
     console.log(this.value);
  };
}

 var item = document.getElementsByClassName('button'); // or better: var item = document.querySelectorAll('.button'); for (var i = 0; i < item.length; i++) { item[i].onclick = function() { console.log(this.value); }; } 

 <div id="container"> <header> <h1>Game</h1> </header> <div id="stage"> </div> <div id="buttons"> <input type="button" value="Q" id="Q" class="button"> <input type="button" value="W" id="W" class="button"> <input type="button" value="E" id="E" class="button"> <input type="button" value="R" id="R" class="button"> <input type="button" value="T" id="T" class="button"> <input type="button" value="Y" id="Y" class="button"> <input type="button" value="U" id="U" class="button"> <input type="button" value="I" id="I" class="button"> <input type="button" value="O" id="O" class="button"> <input type="button" value="P" id="P" class="button"><br> <input type="button" value="A" id="A" class="button"> <input type="button" value="S" id="S" class="button"> <input type="button" value="D" id="D" class="button"> <input type="button" value="F" id="F" class="button"> <input type="button" value="G" id="G" class="button"> <input type="button" value="H" id="H" class="button"> <input type="button" value="J" id="J" class="button"> <input type="button" value="K" id="K" class="button"> <input type="button" value="L" id="L" class="button"><br> <input type="button" value="Z" id="Z" class="button"> <input type="button" value="X" id="X" class="button"> <input type="button" value="C" id="C" class="button"> <input type="button" value="V" id="V" class="button"> <input type="button" value="B" id="B" class="button"> <input type="button" value="N" id="N" class="button"> <input type="button" value="M" id="M" class="button"> </div> </div>