Булево используется как условие оператора if

Question

Я пытаюсь изменить цвет фона страницы при каждом нажатии на элемент кнопки, например так:

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 работает в этом примере.Мы определяем переменную, назначенную логическому значению false, которое используется в качестве условия оператора if, но как JavaScript узнает, что он ссылается на цвет фона, основанный исключительно на значении false?Условие оператора if if(isPurple) гласит: «если ложно», но что ложно?Когда страница загружается, она белая, но как ей присвоить значение false?

Answer 1

как JavaScript знает, что он ссылается на цвет фона, основанный исключительно на false?

Он не знает.

Это логическое предположение / отношение в коде,Значение true и 'purple' существует только в предложении if, а также значения false и 'white'.

Возможно, проще использовать сам цвет,с объектом для переключения цвета.

var button = document.querySelector("button");
var color = 'white';

button.addEventListener("click", function() {
    color = { white: 'purple' , purple: 'white' }[color];
    document.body.style.backgroundColor = color;
});

<button>button</button>

Answer 2

isPurple - переменная, ее значение может меняться.Он проверяет, является ли значение переменной current переменной true или false.Обратите внимание, что после выполнения теста он изменяет значение следующим образом:

isPurple = false;

Тест

if (isPurple)

примерно эквивалентен:

if (isPurple == true)

СледующийКогда вы нажмете кнопку, этот тест больше не будет успешным.В результате, каждый раз, когда вы нажимаете кнопку, она чередуется между white и purple.