Piz*_*y88 5 html javascript css
我正在构建一个带有暗模式开关的应用程序。它适用于第一次点击，但之后，它适用于每第二次点击。
（此代码段显示了一个复选框。在项目中，它看起来像一个真正的开关）
知道如何通过单击让它工作吗？
const body = document.getElementById('body');
let currentBodyClass = body.className;
const darkModeSwitch = document.getElementById('darkModeSwitch');
//Dark Mode
function darkMode() {
darkModeSwitch.addEventListener('click', () => {
if (currentBodyClass === "lightMode") {
body.className = currentBodyClass = "darkMode";
} else if (currentBodyClass === "darkMode") {
body.className = currentBodyClass = "lightMode";
}
});
}#darkModeSwitch {
position: absolute;
left: 15px;
top: 15px;
}
.darkMode { background-color: black; transition: ease .3s; }
.lightMode { background-color: #FFF; transition: ease .3s; }
#darkModeSwitch input[type="checkbox"] {
width: 40px;
height: 20px;
background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
width: 20px;
height: 20px;
background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
background: #000;
}<body id="body" class="lightMode">
<div id="darkModeSwitch">
<input type="checkbox" onclick="darkMode()" title="Toggle Light/Dark Mode" />
</div>
</body>每次单击复选框时，都会添加另一个 eventListener 到darkModeSwitch-addEventListener退出函数并删除onclick
然后，您需要let currentBodyClass = body.className;在darkModeSwitch函数内部移动，以便每次更新值。把它放在函数之外，你在运行时给它赋值一次，然后永远不会更新它
最后，这意义有限
body.className = currentBodyClass = "darkMode";
相反，只是做
body.className = "darkMode";
const darkModeSwitch = document.getElementById('darkModeSwitch');
const body = document.getElementById('body');
//Dark Mode
darkModeSwitch.addEventListener('click', () => {
let currentBodyClass = body.className;
if (body.className === "lightMode") {
body.className = "darkMode";
} else if (currentBodyClass === "darkMode") {
body.className = "lightMode";
}
});#darkModeSwitch {
position: absolute;
left: 15px;
top: 15px;
}
.darkMode {
background-color: black;
transition: ease .3s;
}
.lightMode {
background-color: #FFF;
transition: ease .3s;
}
#darkModeSwitch input[type="checkbox"] {
width: 40px;
height: 20px;
background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
width: 20px;
height: 20px;
background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
background: #000;
}<body id="body" class="lightMode">
<div id="darkModeSwitch">
<input type="checkbox" title="Toggle Light/Dark Mode" />
</div>
</body>最后，你可能要考虑使用.classList与元素的类时，因为它可以让你使用的方法，如.add()/ .remove()/ .contains()-如果元素有一个以上的类集合的时间，当前的方法会失败，而这些方法避免这种情况
let currentBodyClass = body.classList;
if (currentBodyClass.contains("lightMode")) {
currentBodyClass.add('darkMode');
currentBodyClass.remove('lightMode');
} else if (currentBodyClass.contains("darkMode")) {
currentBodyClass.add('lightMode');
currentBodyClass.remove('darkMode');
}
在复选框的每个单击事件上，您都在darkModeSwitch元素上设置一个新的事件侦听器，可以将其删除
const body = document.getElementById('body');
let currentBodyClass = body.className;
const darkModeSwitch = document.getElementById('darkModeSwitch');
//Dark Mode
function darkMode() {
if (currentBodyClass === "lightMode") {
body.className = currentBodyClass = "darkMode";
} else if (currentBodyClass === "darkMode") {
body.className = currentBodyClass = "lightMode";
}
}#darkModeSwitch {
position: absolute;
left: 15px;
top: 15px;
}
.darkMode { background-color: black; transition: ease .3s; }
.lightMode { background-color: #FFF; transition: ease .3s; }
#darkModeSwitch input[type="checkbox"] {
width: 40px;
height: 20px;
background: #fff89d;
}
#darkModeSwitch input:checked[type="checkbox"] {
background: #757575;
}
#darkModeSwitch input[type="checkbox"]:before {
width: 20px;
height: 20px;
background: #fff;
}
#darkModeSwitch input:checked[type="checkbox"]:before {
background: #000;
}<body id="body" class="lightMode">
<div id="darkModeSwitch">
<input type="checkbox" onclick="darkMode()" title="Toggle Light/Dark Mode" />
</div>
</body>