将.innerHTML添加到元素并尝试console.log时出错

Question

我开始学习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

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

Answer 1

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

例如，如果您有三个项目，那么i将最终成为0, 1, 2, 3 - 当您尝试拨打el[3].innerHTML = 'blah'时，它将无法正常工作el[3]未定义。

希望有道理！