Javascript 条件运算符没有按我想象的方式运行

Question

我试图让我的按钮根据 boolean 值改变状态。这看起来可行，我也认为可以，但它只是变成了白色。

知道为什么吗？请帮忙。

function dropDown(){
    var isClicked = false;
    var button = document.getElementById("bigbutton");

    if(isClicked == false){
        button.style.backgroundColor = "red";
        isClicked = true;
    }

    if(isClicked == true){
        button.style.backgroundColor = "white";
        isClicked = false;
    }        
}

Answer 1

您需要使用 else 或 return。现在，您将 isClicked 设置为 false，获取元素，然后运行第一个 if block 。然后将 isClicked 设置为 true，然后它将运行第二个 if block 。您可能想要的是:

if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = false;
} else {
    button.style.backgroundColor = "red";
    isClicked = true;
}

但是，这可能也不起作用，因为 isClicked 是该函数的本地函数，因此始终为 false。您应该做的是检查按钮的属性(可能是背景颜色)，然后将其用作条件:

var bgColor = button.style.backgroundColor
if(bgColor === "red"){
    button.style.backgroundColor = "white";
} else {
    button.style.backgroundColor = "red";
}