点击按钮后按ID匹配元素类型并设置差异化样式的代码问题

你的代码存在几个关键问题，直接导致功能无法正常运行： #

• 循环条件错误：i < elements.length + 1 会超出元素集合的索引范围，应改为 i < elements.length
• 未遍历集合内单个元素：elements.tagName 是操作整个元素集合，而非集合里的每一个元素，需改为 elements[i].tagName
• 标签名判断错误：HTML元素的tagName返回值为大写字符串，比如<i>标签的tagName是I，不是icon；<div>的是DIV
• 变量未声明：elements和i没有用let/const/var声明，会变成全局变量，容易引发冲突

修正后的完整代码 #

JavaScript 代码

function test(ele) {
  const id = ele.id;
  // 用querySelectorAll获取静态节点列表，比getElementsByClassName更稳定
  const elements = document.querySelectorAll(`.${id}`);

  for (let i = 0; i < elements.length; i++) {
    const currentEle = elements[i];
    // 跳过按钮自身（如果不需要处理按钮的话）
    if (currentEle === ele) continue;
    
    if (currentEle.tagName === 'I') {
      // 给图标设置样式，示例：修改颜色和旋转角度
      currentEle.style.color = '#ff4444';
      currentEle.style.transform = 'rotate(180deg)';
    } else if (currentEle.tagName === 'DIV') {
      // 给div设置样式，示例：修改背景和内边距
      currentEle.style.backgroundColor = '#f5f5f5';
      currentEle.style.padding = '10px';
    }
  }
}

HTML 代码

<div class="question-tile-container">
  <button id="01" class="button" onClick="test(this)">
    <p>How do I create an account?</p>
    <i class="01 fa-regular fa-arrow-down-wide-short"></i>
  </button>
  <div class="01 answer">
    Lorem ipsum dolor sit amet.
  </div>
</div>

（注：虽然HTML5允许类名以数字开头，但建议尽量使用字母开头的类名，避免潜在兼容性问题）

关键说明 #

1. 使用querySelectorAll替代getElementsByClassName：前者返回静态节点列表，不会随DOM变化自动更新，更适合当前场景；后者是动态集合，可能引发意外问题
2. 添加if (currentEle === ele) continue;：如果不需要处理按钮自身，可通过这行代码跳过按钮元素
3. 标签名严格匹配大写：HTML规范中tagName始终返回大写字符串，必须用'I'和'DIV'来判断
4. 用const/let声明变量：避免全局变量污染，提升代码稳定性

内容的提问来源于stack exchange，提问作者Jonas