在函數之外訪問變量值的問題

Question

let dark = true;
function toggle() {
    dark = false;
    document.body.classList.toggle('dark-mode');
}

if (dark = false) {
    document.getElementById("logo").src="../../img/Kevin D (White).png";
}else {
    document.getElementById("logo").src="../../img/Kevin D (Black).png";
}

以上是我的代碼。 每當我單擊按鈕時，圖像都不會變為白色版本，而是即使在黑色背景上也保持黑色，我該如何解決？ 該代碼還附加到一個按鈕，該按鈕將調用該函數

Answer 1

這里有幾件事需要解決：

• 您需要在變量更改時再次調用if ，我們通過將其包裝在一個函數中來實現此目的，然后在加載時以及在調用切換時調用它。
• Toggle 當前不“toggle”，將值設置為!dark以每次都反轉它。
• if當前正在將值false分配給dark變量，我們需要對其進行比較，並且由於它已經是布爾值，因此它可以簡單地為if (dark) {}

 var dark = true; function toggle() { dark = !dark; // To actually toggle the variable you need to invert the current value document.body.classList.toggle('dark-mode'); // After the variable is toggle, call the function to update the theme changeTheme() } function changeTheme() { if (dark) { console.log("It's dark!") } else { console.log("It's light!") } } // Call the function on load to set the initial theme changeTheme() // Add an event listener to call the toggle function document.getElementById("toggle").addEventListener("click", toggle);

 <div id="toggle">Toggle</div>

Answer 2

• 您的功能稱為“切換”，但目前只會將黑暗設置為假。 所以我會把它改為dark = !dark ，所以它總是設置相反。
• 下一步是在函數內部包含 if-else 塊，以便在切換時執行。
• 已經提到了 if 語句中的單個等號......
• 而不是if(dark === false)你可以簡單地檢查if(!dark)或者更好地交換邏輯以不以否定開頭並說if(dark){'dark'}else{'not dark}
• 看起來圖像的文件名中有空格，這可能最好避免...

 let dark = true; function toggle() { dark = !dark; document.body.classList.toggle('dark-mode'); if (dark === false) { console.log('dark ===', dark, '>> set white img') // document.getElementById("logo").src = "../../img/Kevin D (White).png"; } else { console.log('dark ===', dark, '>>set black img') // document.getElementById("logo").src = "../../img/Kevin D (Black).png"; } }

 .dark-mode { background: black; color: white; }

 <button onclick="toggle()">toggle</button>

Answer 3

= 符號有錯誤。 應該是==

if (dark == false) {

Answer 4

小錯誤。 而不是 = 必須使用 ==。 並將 if 條件放在切換函數中。

 let dark = true; function toggle() { dark = false; document.body.classList.toggle('dark-mode'); if (dark == false) { document.getElementById("logo").src="../../img/Kevin D (White).png"; } else { document.getElementById("logo").src="../../img/Kevin D (Black).png"; } } console.log(dark) toggle(); console.log(dark)

Answer 5

這是因為當您的源數據更改時，您不會重新運行 scr 受理人。 出於這個原因，存在像 react、vue .... 等框架。 您沒有任何代碼可以更改觀察者並准備一些視圖更新。 您的數據未綁定到查看。

易於適應和構建瀏覽器觀察器實現的是 Event Target。 您可以擴展此對象並為其添加觀察者事件的可能性。

 class Theme extends EventTarget { _mode = 'dark'; set mode(value){ this.dispatchEvent(new Event('change')); this._mode = value; } get mode(){ return this._mode; } } const theme = new Theme(); theme.addEventListener('change', (event) =>{ console.log('now addapt to chnaged', event.target.mode) //document.getElementById("logo").src="../../img/Kevin D (White).png" }) function toggle(){ theme.mode = theme.mode === "dark" ? "white" : "dark"; }

 <button onclick="toggle()">toggle</>