JavaScript点击按钮应用CSS：三个按钮背景色修改仅首个生效问题排查

问题出在这两个关键细节上！ #

嘿，我一眼就瞅到问题所在了，咱们来逐个掰扯清楚：

1. 重复的ID违反了HTML核心规则 #

HTML里的id属性要求页面全局唯一，你给三个按钮都套了id="btn"，这就踩坑了。当你用document.getElementById("btn")的时候，浏览器只会返回页面中第一个匹配这个ID的元素——也就是第一个按钮，所以后面两个按钮点击时，代码还是在修改第一个按钮的颜色，自然看不到效果。

2. 函数参数误用了JavaScript关键字this #

this是JS里的保留关键字，不能用来当函数的参数名，虽然有些浏览器可能会勉强容错，但这绝对是不规范的写法。而且更关键的是：你已经通过onclick="changeColor(this)"把当前点击的按钮元素传进函数了，根本不需要再用getElementById去查找！

修正后的代码 #

直接去掉重复的ID，修改函数参数名，然后直接操作传入的元素就行：

<input type="button" value="Box 1" onclick="changeColor(this)">
<input type="button" value="Box 2" onclick="changeColor(this)">
<input type="button" value="Box 3" onclick="changeColor(this)">

<script>
// 把参数名改成elem（或者其他任意非关键字的名字都可以）
function changeColor(elem) {
  // 直接操作传入的按钮元素
  elem.style.backgroundColor = "red";
}
</script>

如果之后你需要给不同按钮设置不同颜色，或者单独控制某个按钮，也可以给每个按钮加唯一的ID或者自定义class，但当前场景下，通过this传递点击元素是最简单直接的方案。

内容的提问来源于stack exchange，提问作者Sta-Dev