时间戳

首页 > 解决方案 > 切换开关不会在第二次点击时返回主主题

javascript - 切换开关不会在第二次点击时返回主主题

问题描述

第一次点击它改变了主题，但是当我点击第二次时，什么也没有发生，就像它永远是第二个主题一样。所以它应该在每次点击时改变主题。任何人都可以帮我一把吗？

let element = document.getElementById('body');
let toggle = document.getElementById('toggle-button');

toggle.addEventListener('click', function() {
    if (element.className == 'dark') {
        element.className = 'light';
    } else {
        element.className = 'light';
    }
});
body {
  height: 100vh;
  font-family: 'Inter', sans-serif;
  color: white;
  margin: auto 165px;
  padding-top: 50px;
  background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}

.dark {
  background: black;
}

.light {
  background: burlywood;
}
<div class="toggle-button" id="toggle-button">
  <span>Dark Mode</span>
  <input type="checkbox" class="checkbox" id="checkbox">
  <label for="checkbox" class="label">
    <div class="ball"></div>
  </label>
</div>

标签： javascripthtml

解决方案

您正在尝试将类和主体标签称为 id - document.getElementById。我用 替换了你的if条件toggle() method，指定了其中的颜色burlywood，因为默认情况下你的身体已经有了black颜色。

let element = document.querySelector('body');
let toggle = document.querySelector('.toggle-button');

toggle.addEventListener('click', function() {
  element.classList.toggle('light')
});
body {
  height: 100vh;
  font-family: 'Inter', sans-serif;
  color: white;
  margin: auto 165px;
  padding-top: 50px;
  background: linear-gradient(to bottom, #20222F 25%, #1D2128 75%);
}

/*.dark {
  background: black;
}*/

.light {
  background: burlywood;
}
<div class="toggle-button" id="toggle-button">
  <span>Dark Mode</span>
  <input type="checkbox" class="checkbox" id="checkbox">
  <label for="checkbox" class="label">
    <div class="ball"></div>
  </label>
</div>

推荐阅读