Question

在for循环中寻找帮助我正在使用其中最后返回undefined。

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

我使用类搜索返回所有按钮的节点。在执行控制台日志时，这将返回26个按钮，这是我期望的。

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

有什么想法吗？

＆＃13;

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);
  };
}

＆＃13;

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

＆＃13;

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循环返回undefinded

1 个答案: