変数が関数内にあることはできません

Question

Heyoは、変数 '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; 
}); 

Answer 1

：

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

<button>Click</button>

あなたはグローバル変数whiteを変更し、関数実行後、それはtrueまたはfalseとなりますので、関数が別の色をトリガーします（それが白であったならば、クリックした後はピンクになり、逆も同様です）。

しかし、この場合には：機能の実行が終了した後

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

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

<button>Click</button>

すべてのローカル関数の変数が削除されます。機能開始時のwhite変数は常にtrueなので、最初のifステートメントは毎回動作します（バックグラウンドはピンクのみに変更されます）。