Javascript 变量不能在函数内

嘿，有人能给我解释一下，如果变量‘white’在函数中，为什么这段代码不起作用

var button = document.querySelector("button");
var body = document.querySelector("body");
var white = true;

button.addEventListener("click", function() {
  if (white) {
    body.style.backgroundColor="pink"; 
  } else {
    body.style.backgroundColor="white";  
  }   
  white = !white;
});

在这种情况下：

var-button=document.querySelector（“按钮”）；
var body=document.querySelector（“body”）；
var-white=true；
addEventListener（“单击”，函数（）{
如果（白色）{
body.style.backgroundColor=“粉色”；
}否则{
body.style.backgroundColor=“白色”；
}   
白色=！白色；
});
单击
您了解变量范围吗？它可以工作，但每次单击时总是定义为
true
。因此，大多数函数的代码永远不会发生可能的重复。如果变量声明位于函数内部，则每次函数运行时，它都会初始化为
true
，因此
If（white）
将始终计算为true。它会将其更改为false，然后退出函数，将该函数从调用堆栈中弹出（从而清除白色变量）。然后，当函数再次运行时，它将重新初始化为true，运行
if（白色）
code，然后漂洗并重复。如果在函数外部声明变量，它将超出函数的作用域，因此将保留其真/假状态，并且代码将正常工作。实际上，您的意思是在函数内部“声明”变量为白色。变量声明、初始化、赋值或求值是关于变量的不同知识。