JavaScript点击按钮修改多个li颜色仅首个元素生效问题排查

document.querySelector() 本身的逻辑是只返回和传入选择器匹配的第一个DOM元素，你写的选择器虽然覆盖了三个li的id，但最终只会选中第一个id为one的li，剩余两个li没有被选中，所以不会变色。

使用document.querySelectorAll()替换原来的querySelector，这个方法会返回所有匹配选择器的元素集合，遍历集合给每个元素设置黑色即可。

修正后的完整代码：

<html>  
 <body>
   <ul>
      <li id="one">Item1</li>
      <li id="two">Item2</li>
      <li id="three">Item3</li>
   </ul>
   <button onclick="changecolor()">Black</button>
 </body>
</html>

<script>
function changecolor() {
  const allTargetLi = document.querySelectorAll("#one, #two, #three");
  allTargetLi.forEach(li => {
    li.style.color = "black";
  })
}
</script>

可选简化方案 #

如果你的需求是修改列表下所有li的颜色，不需要限定特定id，完全可以不用逐个写id选择器，直接用层级选择器即可：

function changecolor() {
  document.querySelectorAll("ul li").forEach(li => {
    li.style.color = "black";
  })
}

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