按钮修改文本样式时，同ID元素仅首个生效的问题求助

核心问题：HTML规范里ID必须是唯一的，document.getElementById()只会返回页面中第一个匹配该ID的元素，所以你后面的id="blue"元素根本没被选中。

下面是具体修改步骤：

1. 修正HTML：用类代替重复ID #

把重复的ID改成类名，用来标记需要被修改的元素（避免和样式类混淆，这里用blue-target和pink-target）：

<button class="body" onclick="changeBlue()">Make Blue</button>
<button class="body" onclick="changePink()">Make Pink</button>

<span class="body blue-target">thing One</span>
<span class="body pink-target">thing Two</span>
<span class="body blue-target">thing three</span>

2. 修改JavaScript：选中所有目标元素并批量处理 #

用document.querySelectorAll()获取所有匹配类名的元素，然后遍历每个元素切换样式类，同时简化类判断逻辑：

function changeBlue() {
  // 获取所有需要改成蓝色的元素
  const blueTargets = document.querySelectorAll('.blue-target');
  blueTargets.forEach(element => {
    // 判断当前是否是默认样式
    if (element.classList.contains('body')) {
      element.classList.remove('body');
      element.classList.add('blue');
    } else {
      element.classList.remove('blue');
      element.classList.add('body');
    }
  });
}

function changePink() {
  const pinkTargets = document.querySelectorAll('.pink-target');
  pinkTargets.forEach(element => {
    if (element.classList.contains('body')) {
      element.classList.remove('body');
      element.classList.add('pink');
    } else {
      element.classList.remove('pink');
      element.classList.add('body');
    }
  });
}

可选优化：简化CSS代码 #

三个样式类的字体和字号完全一致，可以抽成一个公共类减少重复代码：

/* 公共文本样式 */
.text-style {
  font-family: Helvetica;
  font-size: 18px;
}

.blue {
  color: #ffffff;
  background-color:#003eff;
} 

.pink {
  color: #ffffff;
  background-color:#eb00ff;
}

.body {
  color: #000000;
  background-color:#ffffff;
}

对应的HTML里给元素加上text-style类：

<span class="text-style body blue-target">thing One</span>
<span class="text-style body pink-target">thing Two</span>
<span class="text-style body blue-target">thing three</span>

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