如何使用 Javascript 正确构建暗模式切换？

Question

我一直在尝试使用 JavaScript 让我的切换触发暗模式打开和关闭，但显然我做错了。 我试图通过将灯光 class 应用到我的身体并使用 addClassListener 来触发它。 下面是我的代码的简化版本，但我也计划在特定类上执行此操作，以便在每种不同模式下也更改字体和 div colors。 有什么建议么？

HTML

<label class="switch">
  <input type="checkbox" checked>
  <span id="slide" class="slider round"></span>
</label>

CSS

body{
          
          position: absolute;
          top: 320px;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: hsl(230, 17%, 14%);
          z-index: -1;
          
          
      }
    
    body.light {
          
          background-color: white;
          
          
      }

Javascript

const checkbox = document.getElementById('slide');
        
        checkbox.addEventListener('change', ()
                                 ==>{document.body.classList.toggle('light');
            
        });

Answer 1

您正在尝试通过id获取元素，但您尚未在代码段中定义任何id 。

<label class="switch">
  <input type="checkbox" checked>
  <span id="slider" class="slider round"></span>
</label>

此外，您正在侦听span元素上的change事件。 span元素永远不会触发更改事件。 如果您将其更改为在input元素中侦听，它应该会触发。 文档