由于将 .innerHTML 添加到元素并尝试 console.log 而导致的错误

Question

我开始学习 JavaScript 并且正在构建一个带有 DOM 操作的剪刀石头布游戏。

到目前为止，我正在尝试 link 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

所以数组返回了，但是有错误？谁能帮忙解释一下为什么会这样，我该如何删除它？

Answer 1

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

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

希望能说得通！

An error due to adding .innerHTML to an element and attempting console.log