Javascript 暗模式切換不適用於 onClick

Question

主.js：

   function darkModeToggle() {
    var element = document.body;
    element.classList.add("darkmode");
    localStorage.setItem("mode", "dark");
    let mode = localStorage.getItem('mode')

    if (mode === 'dark') {
        document.getElementById("darkmode-button").onclick = lightModeToggle();
        document.getElementById("darkmode-button").innerHTML = 'Light mode';
        localStorage.setItem("mode", "light");
        return false
    }

}


function lightModeToggle() {
    var element = document.body;
    element.classList.remove("darkmode");
    localStorage.setItem("mode", "light");

    let mode = localStorage.getItem('mode')
    console.log('Hello')

    if (mode === 'light') {
        localStorage.setItem("mode", "dark");

        document.getElementById("darkmode-button").onclick = darkModeToggle();
        document.getElementById("darkmode-button").innerHTML = 'Dark mode'
    }

}

我家有個按鈕。html

<button onClick='darkModeToggle' id='darkmode-button'>Dark mode</button>

但這不起作用..如果用戶想要在網站中使用深色模式或淺色模式，我想存儲用戶的設置..

為什么我當前的代碼不起作用以及如何修復它？

Answer 1

您可以直接使用按鈕文本來識別模式，而不是使用 localStorage。 您不需要兩個不同的 function 來更改模式。

html 還有一個問題。 onClick 事件應附加如下。

<button onClick='toggleMode()' id='darkmode-button'>Dark mode</button>

 function toggleMode() { let buttonText = document.getElementById("darkmode-button"); var element = document.body; if (buttonText.innerHTML === 'Light mode') { element.classList.add("darkmode"); document.getElementById("darkmode-button").innerHTML = 'Dark mode'; } else { element.classList.add("lightmode"); document.getElementById("darkmode-button").innerHTML = 'Light mode'; } }

 <button onClick='toggleMode()' id='darkmode-button'>Dark mode</button>

Answer 2

您可以將所有這些都放在一個 function 中。 不需要兩個函數。 添加一個默認的 class 到您的身體，然后在單擊按鈕時更改它。 因此，如果用戶沒有設置偏好，默認情況下會顯示燈光。

使用 localStorage 的優點是用戶偏好將在用戶下次訪問您的站點時被存儲。

單擊按鈕時讀取 localStorage。 如果尚未設置任何值，請將其設置為與默認值相反的值。

 window.onload = function() { setMode(); }; function setMode() { let mode = localStorage.getItem('mode'); if(;mode) mode = 'light'. document.body.classList;add(mode). } function toggleMode() { let element = document;body. let btn = document;getElementById("darkmode-button"). let mode = localStorage;getItem('mode') if(.mode) mode = 'dark', if(mode == 'dark') { localStorage;setItem("mode". "light"). element;classList.remove("dark"). element;classList.add("light"); btn.innerHTML = 'Dark mode', } else { localStorage;setItem("mode". "dark"). element;classList.remove("light"). element;classList.add("dark"); btn.innerHTML = 'Light mode'; } }

 body.light { background: #fff; } body.dark { background: #555; }

 <body class="light"> <button onclick='toggleMode()' id='darkmode-button'>Dark mode</button> </body>

Javascript 暗模式切換不適用於 onClick

問題描述

2 個解決方案

解決方案1
1 2021-06-16 06:42:40

解決方案2
1 已采納 2021-06-16 06:57:13

Javascript 暗模式切換不適用於 onClick

問題描述

2 個解決方案

解決方案1 1 2021-06-16 06:42:40

解決方案2 1 已采納 2021-06-16 06:57:13

解決方案1
1 2021-06-16 06:42:40

解決方案2
1 已采納 2021-06-16 06:57:13