JS随机背景色脚本仅修改三个a标签中一个背景色问题求助

嘿，这问题我太熟了！你代码里的核心问题出在document.getElementById()这个方法上——HTML规范里明确要求ID是页面内唯一的标识，所以这个方法只会返回第一个匹配到该ID的元素，剩下的两个a标签根本没被选中，自然不会变色啦。

快速修复方案：用类选择器替代ID选择器 #

既然要给多个元素设置样式，用class才是正确的姿势，步骤如下：

1. 修改HTML结构：把三个a标签的id="rand-c"统一改成class="rand-bg"（名字随便取，只要统一就行）：

<a href="#" class="rand-bg">第一个链接</a>
<a href="#" class="rand-bg">第二个链接</a>
<a href="#" class="rand-bg">第三个链接</a>

2. 更新JS脚本：用document.querySelectorAll()获取所有带该类的元素，然后遍历每个元素设置随机背景色：

function random_bg_color() {
  // 生成随机RGB值
  const x = Math.floor(Math.random() * 256);
  const y = Math.floor(Math.random() * 256);
  const z = Math.floor(Math.random() * 256);
  const bgColor = `rgb(${x}, ${y}, ${z})`;
  console.log(bgColor);
  
  // 获取所有目标a标签
  const targetLinks = document.querySelectorAll('.rand-bg');
  // 遍历每个标签设置背景色
  targetLinks.forEach(link => {
    link.style.background = bgColor;
  });
}

// 页面加载完成后执行函数（刷新时也会触发）
window.addEventListener('load', random_bg_color);

备选方案：使用不同ID（不推荐，灵活性差） #

如果你非要用ID，那得给每个a标签设置唯一ID，比如rand-c1、rand-c2、rand-c3，然后分别调用getElementById：

function random_bg_color() {
  const x = Math.floor(Math.random() * 256);
  const y = Math.floor(Math.random() * 256);
  const z = Math.floor(Math.random() * 256);
  const bgColor = `rgb(${x}, ${y}, ${z})`;
  
  document.getElementById("rand-c1").style.background = bgColor;
  document.getElementById("rand-c2").style.background = bgColor;
  document.getElementById("rand-c3").style.background = bgColor;
}
window.addEventListener('load', random_bg_color);

但这种方式一旦要修改的元素变多，代码会变得冗余，所以还是推荐用类选择器的方案。

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