JavaScript循环为元素添加cool类失败，求问题排查与优化方案

原代码问题分析 #

你的代码未生效，核心问题有三个：

• 循环条件写反：for (i = 0; i > loopsLng; i++) 中i > loopsLng永远不成立，循环根本没执行，需改为i < loopsLng
• 重复获取DOM元素：loops数组里已经存储了通过getElementById拿到的DOM对象，无需再用document.getElementById(loops[i])，直接操作loops[i]即可
• HTML语法错误：第二个<p>标签的style里有无效代码2rem;，缺少属性名，需补全为padding:2rem;

高效实现方案 #

没必要逐个获取元素存变量，直接用选择器批量匹配目标元素，再通过遍历操作更简洁：

• 用document.querySelectorAll('p[id^="cool"]')一次性选中所有id以cool开头的<p>元素
• 用classList.add()添加类（比className更安全，不会覆盖元素原有类）
• 用forEach遍历，语法更直观简洁

修正后的完整代码 #

HTML部分

<p id="cool" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool1" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool2" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool3" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>
<p id="cool4" style="margin-top:2rem; background-color:#b35900; padding:2rem; color:white;"></p>

JavaScript部分

// 批量获取目标元素
const elements = document.querySelectorAll('p[id^="cool"]');

// 遍历元素添加类并显示类名
elements.forEach(el => {
  el.classList.add('cool');
  el.textContent = el.className;
});

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