變量不能在函數裏

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

來源

2017-08-04 Benas Lengvinas

你瞭解可變範圍嗎？ – Carcigenicate

它可以工作，但每次點擊時它總是被定義爲「true」。所以，絕大多數函數的代碼永遠不會發生 – Anarion

[JavaScript中的變量範圍是什麼？]的可能重複（https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in -javascript） –

在這種情況下：

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語句（將背景僅更改爲粉紅色）。

來源

2017-08-04 15:19:09

變量不能在函數裏

回答

相關問題