我试图创建一个按钮，当它被点击时，改变背景颜色(绿色)。但是当它再次被点击时，按钮返回到原来的背景颜色(从橙色)。

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

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

能帮帮忙吗？Thx！

我试图创建一个按钮，当它被点击时，改变背景颜色(绿色)。但是当它再次被点击时，按钮返回到原来的背景颜色(从橙色)。

有很多方法可以做到这一点。我的首选方法是简单地在元素上切换一个类。

在CSS中，通过#btn-1设置默认颜色，然后通过#btn-1.active设置一个活动颜色。然后通过切换active类，当元素有active类时，将颜色更改为绿色，否则更改为橙色。

var toggleBTN = document.getElementById("btn-1")

toggleBTN.addEventListener("click",() => {
  toggleBTN.classList.toggle("active");
});

#btn-1{
  background:orange;
}

#btn-1.active{
  background:green;
}

<button id="btn-1">Toggle Color</button>

只需切换单击事件的颜色:

document
  .getElementById("btn-1")
  .addEventListener(
    'click', 
    ({target:{style}}) => style.backgroundColor = style.backgroundColor === 'orange' ? 'green' : 'orange'
  );

<button id="btn-1" style="background-color: orange">Click me</button>

let button = document.getElementById("button");
    button.style.backgroundColor = "orange";

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

<button id="button">test</button>