关于布尔值作为if条件及isPurple变量切换背景色的技术疑问

先把你写的代码格式化后展示出来：

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的工作机制～

核心：isPurple是个「状态标记开关」 #

这个变量本身不直接控制背景色，它的作用是记录当前页面背景的状态：

• isPurple = false → 标记「当前背景不是紫色（是白色）」
• isPurple = true → 标记「当前背景是紫色」

完整执行流程拆解 #

1. 页面刚加载时：

   • 代码先找到页面上的按钮元素，存在button变量里
   • 初始化isPurple = false：因为页面默认背景是白色，所以我们用false来和这个初始状态对应，相当于告诉代码「一开始背景是白色，不是紫色」

2. 第一次点击按钮：

   • 触发点击事件的函数，进入if(isPurple)判断：此时isPurple是false，条件不成立，所以走else分支
   • 把页面背景改成紫色，然后把isPurple设为true——现在状态更新为「当前背景是紫色」

3. 第二次点击按钮：

   • 再次进入判断，此时isPurple是true，条件成立，执行if里的代码
   • 把背景改回白色，再把isPurple设为false——状态回到「当前背景是白色」

4. 后续每次点击：

   • 就会重复上面的逻辑，在「白色→紫色→白色」之间来回切换

解答你疑惑的几个关键点 #

• if(isPurple)不是“如果false”，而是“如果isPurple的值为真”：JavaScript里if条件会自动把变量转为布尔值，所以if(isPurple)等价于if(isPurple === true)，只有当变量是true时才会执行if块的代码
• 页面初始背景是白色，我们手动给isPurple设为false，是为了让这个标记和实际的背景状态保持同步，这样代码才能正确判断下一步该切换成什么颜色
• 这个变量的核心作用就是**“记住之前的状态”**——如果没有它，代码每次点击都不知道当前背景是什么颜色，就没法完成切换逻辑啦

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