求助：实现按钮点击两次切换橙绿背景色的JavaScript问题

你的代码核心问题 #

• 运算符误用：if (btn1.style.backgroundColor = "orange") 里用了赋值运算符=，应该用比较运算符===（严格相等）或==。
• 逻辑错误：页面加载时只会执行一次if-else判断，绑定一次点击事件，后续点击按钮不会重新判断状态，自然无法实现切换效果。

修复方案1：点击事件内实时判断背景色 #

把判断逻辑放在点击回调里，每次点击都检查当前状态再切换：

var btn1 = document.getElementById("btn-1");

// 先设置初始橙色背景（若CSS未定义）
btn1.style.backgroundColor = "orange";

btn1.addEventListener("click", function() {
    if (btn1.style.backgroundColor === "orange") {
        btn1.style.backgroundColor = "green";
    } else {
        btn1.style.backgroundColor = "orange";
    }
});

注意：部分浏览器会把orange转为rgb(255, 165, 0)格式返回，可能导致判断失效，更稳妥的方式是用CSS类切换。

修复方案2：CSS类切换（推荐） #

将样式与逻辑分离，避免颜色值格式问题，也更易维护：

CSS代码 #

.btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
}
.btn-orange {
    background-color: orange;
}
.btn-green {
    background-color: green;
}

HTML代码 #

<button id="btn-1" class="btn btn-orange">切换颜色</button>

JavaScript代码 #

var btn1 = document.getElementById("btn-1");

btn1.addEventListener("click", function() {
    // 切换两个类名实现背景色交替
    btn1.classList.toggle("btn-orange");
    btn1.classList.toggle("btn-green");
});

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