Question

我每次点击按钮元素时都会尝试更改页面的背景颜色，如下所示：

var button = document.querySelector("button");
var isPurple = false;

button.addEventListener("click",function(){
if(isPurple){
  document.body.style.backgroundColor = "white";
  isPurple = false;
}else {
document.body.style.backgroundColor = "purple";
  isPurple = true;
 }
});

我很难理解这段代码，即isPurple在这个例子中是如何工作的。我们定义了一个赋值为Boolean false的变量，它被用作if语句的一个条件，但JavaScript如何知道仅仅基于false引用背景颜色？ if语句if(isPurple)的条件是说“if false”但是什么是假的？当页面加载它是白色但是如何赋值为false？

Answer 1

isPurple是一个变量，它的值可以改变。它正在测试变量的当前值是true还是false。请注意，在执行测试后，它会使用以下内容更改值：

isPurple = false;

测试

if (isPurple)

大致相当于：

if (isPurple == true)

下次单击该按钮时，该测试将不再成功。因此，每次单击该按钮时，它都会在white和purple之间切换。

Answer 2

JavaScript如何知道仅基于false引用背景颜色？

它不知道。

这是代码中的逻辑假设/关系。 true和'purple'的值仅存在于if子句中，以及false和'white'的值。

使用颜色本身可能更容易，使用一个用于切换颜色的对象。

var button = document.querySelector("button");
var color = 'white';

button.addEventListener("click", function() {
    color = { white: 'purple' , purple: 'white' }[color];
    document.body.style.backgroundColor = color;
});

<button>button</button>

布尔值用作if语句的条件

2 个答案: