Javascript 暗模式切换_Javascript

Javascript 暗模式切换

javascript

Javascript 暗模式切换,javascript,Javascript,我一直在尝试创建一个逻辑来来回切换按钮（图像），并在样式（亮/暗模式）之间无限切换，但我没有做到这一点。你能给我一些如何完成这项任务的线索吗有了这段代码，我成功地只切换了一次样式 let toggleDark = document.getElementById('btn-toggle').addEventListener('click', function() { document.querySelector('body').style.backgroundColor = 'b

我一直在尝试创建一个逻辑来来回切换按钮（图像），并在样式（亮/暗模式）之间无限切换，但我没有做到这一点。你能给我一些如何完成这项任务的线索吗

有了这段代码，我成功地只切换了一次样式

let toggleDark =
    document.getElementById('btn-toggle').addEventListener('click', function() {
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    document.querySelector('.sun').style.visibility = 'hidden';
    document.querySelector('.moon').style.visibility = 'visible';

    toggleLight();
});

function toggleLight() {
    document.getElementById('btn-toggle').addEventListener('click', function() {
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    document.querySelector('.sun').style.visibility = 'visible';
    document.querySelector('.moon').style.visibility = 'hidden';
})};

这是HTML部分

<body class="dark light">

<div>
    <button id="btn-toggle">
        <img src="weather-sunny.png" alt="Light Mode" id="light_mode" class="sun">
        <img src="weather-night.png" alt="Dark Mode" id="dark_mode" class="moon">
    </button>
</div>

<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quo, officiis repellat quam accusantium neque pariatur! Facilis nemo enim cumque atque, eaque perferendis corporis aliquid, temporibus, incidunt, sint sed sunt.</p>
</main>


Lorem ipsum dolor sit amet，奉献精英。自由吧，这是我的工作！在圣约翰市，临时性的，临时性的，非流动性的，流动性的

如果将相同的eventListener添加到相同的元素中，则在设置了这两个元素之后，这两个元素都将执行。它不会在这两者之间切换，您可以在一个带有布尔值的函数中进行切换

注意：如果开始模式为白色，则切换为true；如果开始模式为黑色，则切换为false

function colormode(toggle) {
    document.querySelector('body').style.backgroundColor = (toggle) ?'black':'white';
    document.querySelector('body').style.color = (toggle) ? 'white':'black';
    document.querySelector('.sun').style.visibility = (toggle) ? 'hidden':'visible';
    document.querySelector('.moon').style.visibility = (toggle) ? 'visible':'hidden';
};

var toggled = false;
document.getElementById('btn-toggle').addEventListener('click', function() {
   colormode(toggled);
   toggled = !toggled;
});

难道不应该有一个结束标记，

？我认为html解析器足够宽容，可以忽略它是的！我忘了复印了。哇，它工作了！那容易！？我会花上几天的时间来解决这个问题！虽然我猜同样的效果可以用更少的代码行来实现。我希望有一天我也能做到。谢谢。不客气，如果你不愿意的话，我可以用一个简短的版本更新我的答案。我很想看看。我把答案缩短了一点，只是用三元运算符合并了两个函数。发生了什么？有错误吗？与以前的版本相比，发生了什么