Variable kann nicht innerhalb der Funktion sein

Question

Heyo, kann mir jemand erklären, warum dieser Code nicht funktioniert, wenn die Variable 'weiß' in der Funktion ist?

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

In diesem Fall:

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>

Sie die globale Variable ändern white und nach Funktionsausführung wird es true oder false sein, so dass die Funktion die Farbe zu einem anderen auslösen (wenn es weiß war, wird es nach dem Klick rosa und umgekehrt).

Aber in diesem Fall:

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>

Alle lokalen Funktionsvariablen entfernt werden, nachdem die Funktionsausführung beendet ist. Ihre white Variable ist immer true auf Funktion Start, so dass die erste if Anweisung jedes Mal funktioniert (ändert den Hintergrund nur rosa).