javascript for in 循环返回 undefined

Question

寻求有关我正在使用的 for in 循环的帮助，其中 returns 最后未定义。

我有 26 个按钮，一个按钮对应字母表中的每个字母。我需要扫描按钮，以便在单击按钮时获得该按钮的值。

我正在使用 class 搜索 returns 所有按钮的节点。在做一个控制台日志时，这个 returns 26 个按钮，这是我期望的。

然后我通过按钮将 for in 循环设置为运行以将时钟添加到每个按钮，在运行结束时通过它们添加一个未定义的。任何人都可以向我解释为什么这会给我一个未定义的类型错误。

有什么想法吗？

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

您不应该对集合使用 for-in 循环。如果你这样做，你需要测试 hasOwnProperty

而是使用简单的循环

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>

javascript for in 循环返回 undefined

javascript for in loop returning undefinded

html

javascript

for-in-loop