由于将 .innerHTML 添加到元素并尝试使用 console.log 而导致的错误 [关闭]答案

【问题标题】：An error due to adding .innerHTML to an element and attempting console.log [closed]由于将 .innerHTML 添加到元素并尝试使用 console.log 而导致的错误 [关闭]
【发布时间】：2018-05-18 00:11:07
【问题描述】：

我开始学习 JavaScript，并正在使用 DOM 操作构建一个石头、纸、剪刀游戏。

到目前为止，我正在尝试将 HTML 按钮链接到播放器选项：

<div class="choices">
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
</div>

然后我使用 Javascript 来尝试捕获按钮的值以在游戏功能中使用：

JavaScript

<script>
const el = document.getElementsByTagName('button');
for (let i = 0; i <= el.length; i++) {
  console.log(el[i].innerHTML);
}

但是，上面的代码在控制台中提供了以下结果：

Rock
Paper
Scissors
Uncaught TypeError: Cannot read property 'innerHTML' of undefined at 
ui_rps.html:38

所以返回了数组，但是有错误？有人可以帮忙解释一下为什么会这样以及如何删除它吗？

【问题讨论】：

for (let i = 0; i <= el.length; i++) { Javascript 类数组对象是零索引的； arrayLike[arrayLike.length] 不应该存在。更改为i < el.length。更好的是，使用 forEach 而不是 for 循环
会做的，谢谢。
经典的一对一错误。请尝试使用浏览器的debugging capabilities。 Rubber Duck Debug你的代码。

标签： javascript dom innerhtml console.log

【解决方案1】：

您需要将for 循环从i <= el.length 更改为i < el.length。目前，它正在迭代到比您拥有的多一项。

例如，如果您有三个项目，那么 i 最终将成为 0, 1, 2, 3 - 当您尝试调用 el[3].innerHTML = 'blah' 时它不会工作，因为 el[3] 未定义。

希望这有点道理！

【讨论】：

确实如此。我觉得很厚，因为没有意识到！现在可以了，非常感谢。
@J.Day 不要觉得厚实——发生在我们最好的人身上！