Variable cannot be inside the function

Question

Heyo, can some one explain to me why this code won't work if the variable 'white' is inside the function?

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

It'll work but it'll be always defined as `true` on each click. So, most of function's code will never happen — Anarion, Aug 04 '17 at 15:11
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — PM 77-1, Aug 04 '17 at 15:13
If the variable declaration is inside of the function, every single time the function is run, it will initialize to `true`, so your `if(white)` will always evaluate to true. It will change it to false, and then drop out of the function, popping that function off of the call stack (and consequently wiping out your white variable). Then when the function is run again, it re-initializes to true, runs `if(white)` code, and rinse & repeat. If you declare the variable outside the function, it lives beyond the scope of the function, and therefore retains its true/false state and your code works — mhodges, Aug 04 '17 at 15:14
You actually mean variable white "declared" inside the function. Variables declaration, initialisation, assignment or evaluation are different things that you should know about variables. — Farrukh Subhani, Aug 04 '17 at 15:37
Thank you for such quick answers, as well as links about the topic. — Benas Lengvinas, Aug 04 '17 at 19:00

P.S. · Accepted Answer · 2017-08-04T15:32:15.030

In this case:

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>

You change the global variable white and after function execution it will be true or false, so the function will trigger the color to another (if it was white, after click it will be pink and vise versa).

But in this case:

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>

All local function variables are removed after the function execution is finished. Your white variable is always true on function start, so the first if statement works every time (changes the background to pink only).

Variable cannot be inside the function

1 Answers1