Javascript 暗模式切换不适用于 onClick

Question

main.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'
    }

}

我在 home.html

中有一个按钮

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

但这不起作用..如果用户想要在网站中使用暗模式或亮模式，我想存储用户的设置..

为什么我当前的代码不起作用，如何解决？

Answer 1

您可以直接使用按钮文本来识别模式，而不是使用localStorage。你不需要两个不同的函数来改变模式。

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

您可以将所有这些放在一个函数中。不需要两个函数。添加一个默认的 class 例如灯到你的 body 然后点击按钮时改变它。因此，如果用户未设置首选项，默认情况下会显示灯光。

使用 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

Javascript dark mode toggle not working with onClick

javascript

dom-events

darkmode