Javascript条件运算符没有按我认为的方式运行

我试图让我的按钮根据布尔值改变状态。这看起来像它会工作，我想它会，但它只是变为白色

知道为什么吗？请帮忙

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;
    }        
}

---

您有两个独立的

if

语句。第二个总是在第一个之后运行。因此，当第一个操作完成时，它将

isClicked

设置为

true

，然后第二个操作运行并查看

true

值并将颜色设置为白色

您需要将这两条语句与

else

分支组合成“一条或另一条”操作。此外，对于布尔值，您不需要在

if

语句中显式测试

true

或

false

，因为

if

条件总是针对

true

进行评估

function dropDown(){

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

  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

说到这里，您的函数会立即将

isClicked

设置为

false

，因此您总是会陷入

else

分支。您不应为此设置初始值，而应在更高的范围内声明变量，如下所示：

// We'll declare these at a higher scope so we don't keep establishing them
// every time the function runs:
var isClicked = null;
var button = document.getElementById("bigbutton");

function dropDown(){
  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

最后，如果我正确理解了您的场景，您可能根本不需要JavaScript来完成以下任务：

按钮{背景色：白色；}
按钮：活动{背景色：红色；}

---

单击我

您有两个独立的

if

语句。第二个总是在第一个之后运行。因此，当第一个操作完成时，它将

isClicked

设置为

true

，然后第二个操作运行并查看

true

值并将颜色设置为白色

您需要将这两条语句与

else

分支组合成“一条或另一条”操作。此外，对于布尔值，您不需要在

if

语句中显式测试

true

或

false

，因为

if

条件总是针对

true

进行评估

function dropDown(){

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

  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

说到这里，您的函数会立即将

isClicked

设置为

false

，因此您总是会陷入

else

分支。您不应为此设置初始值，而应在更高的范围内声明变量，如下所示：

// We'll declare these at a higher scope so we don't keep establishing them
// every time the function runs:
var isClicked = null;
var button = document.getElementById("bigbutton");

function dropDown(){
  // This implicitly tests isClicked for true
  if(isClicked){
    button.style.backgroundColor = "white";
    isClicked = true;
  } else { 
    // If the earlier condition failed, the else branch is automatically run
    button.style.backgroundColor = "red";
    isClicked = false;
  }
}

最后，如果我正确理解了您的场景，您可能根本不需要JavaScript来完成以下任务：

按钮{背景色：白色；}
按钮：活动{背景色：红色；}

---

单击我

您的javascript代码将自上而下运行。因此，从isClicked false开始，如果满足第一个

，则将背景设置为红色。在
if
中，您将isclicked设置为true，以便满足下一个if语句，将背景色变为白色

最终的结果是你的背景色是白色的

您可能希望在按钮的“单击”事件上设置isclicked。
您的javascript代码将自上而下运行。因此，从isClicked false开始，如果满足第一个
，则将背景设置为红色。在
if
中，您将isclicked设置为true，以便满足下一个if语句，将背景色变为白色

最终的结果是你的背景色是白色的

您可能希望在按钮的“单击”事件上设置isclicked。
您需要使用else或return。现在，您正在将isClicked设置为false，获取元素，然后运行第一个if块。然后将isClicked设置为true，然后它将运行第二个if块。您可能想要的是：

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

然而，这也可能不起作用，因为isClicked是这个函数的本地函数，所以总是false。您应该做的是检查按钮的属性，可能是backgroundColor，并将其用作条件：

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

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

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

然而，这也可能不起作用，因为isClicked是这个函数的本地函数，所以总是false。您应该做的是检查按钮的属性，可能是backgroundColor，并将其用作条件：

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

这个代码片段没有真正的意义，您应该将click值作为事件获取，如果在代码中将其设置为
false
，则不会获得任何结果

$( "#yourButtonID" ).click(function() {
     button.style.backgroundColor = "white";
});

在函数外部（在我的示例中，在页面加载时），将颜色设置为红色：

$( document ).ready(function() {
     button.style.backgroundColor = "red";
});

这个代码片段没有真正的意义，您应该将click值作为事件获取，如果在代码中将其设置为
false
，则不会获得任何结果

$( "#yourButtonID" ).click(function() {
     button.style.backgroundColor = "white";
});

在函数外部（在我的示例中，在页面加载时），将颜色设置为红色：

$( document ).ready(function() {
     button.style.backgroundColor = "red";
});

对于第二个语句，你应该使用<代码>否则为< /代码>，否则它总是正确的（因为第一个语句如果它还没有被ISCLISTION），请考虑选择正确的答案。对于第二个语句，你应该使用<代码>否则如果< /COD>，否则它将永远是真的。（因为第一条语句将使isClicked为真，如果它尚未为真）请考虑选择正确的答案。现在你可以显示<代码>如果是无效的，因为你将var设置为false，然后立即检查它是什么。@ TakdNARKK整个场景是没有意义的，但是这个代码停止了OP正在获取的错误并解释为什么。现在你可以显示<代码>如果是没有用的。将var设置为false，然后立即检查它是什么。@takendark整个场景都没有意义，但是这段代码停止了OP得到的错误并解释了原因。