JS新手开发石头剪刀布游戏：循环获取button innerHTML报错求助

嘿，这个问题我之前开发小交互的时候也碰到过，咱们来一步步搞清楚问题出在哪，以及怎么解决~

报错原因 #

你写的循环条件i <= el.length是问题的核心！

document.getElementsByTagName('button')返回的是一个HTMLCollection（类数组对象），它的length属性是3（对应你页面上的3个按钮）。而类数组的索引是从0开始的，也就是说三个按钮的索引分别是0、1、2。

当循环执行到i = 3的时候（因为<=会允许i等于length的值），el[3]是不存在的，属于undefined，这时候你去读取它的innerHTML自然就会抛出Cannot read property 'innerHTML' of undefined的错误了。

解决方法 #

这里有几种简单的修复方式，你可以根据习惯选择：

1. 修改循环条件（最直接） #

把i <= el.length改成i < el.length，这样循环只会执行到i = 2，刚好覆盖所有按钮：

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

2. 使用更现代的for...of循环 #

这种方式不需要手动管理索引，直接遍历每个按钮，代码更简洁易读：

<script> 
const el = document.getElementsByTagName('button'); 
for (const button of el) {
  console.log(button.innerHTML);
} 
</script>

3. 转成数组后用forEach遍历 #

HTMLCollection本身没有forEach方法，我们可以用Array.from()把它转成真正的数组，然后使用forEach：

<script> 
const buttons = Array.from(document.getElementsByTagName('button'));
buttons.forEach(button => {
  console.log(button.innerHTML);
}); 
</script>

额外建议：关联按钮点击事件（适配你的游戏需求） #

既然你是要做石头剪刀布游戏，肯定需要给按钮绑定点击事件来获取玩家的选择。这里给你一个实用的示例代码：

<script> 
// 获取所有按钮
const buttons = document.getElementsByTagName('button');

// 给每个按钮绑定点击事件
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    // 获取当前点击按钮的文本（玩家的选择）
    const playerChoice = this.innerHTML;
    console.log('玩家选择了：', playerChoice);
    
    // 这里可以调用你的游戏逻辑函数，比如：
    // playGame(playerChoice);
  });
}
</script>

内容的提问来源于stack exchange，提问作者J.Day