JavaScript，有人知道这段代码有什么问题吗？

Question

我正在使用 javascript 为我的管理面板创建一个暗模式切换，有时当我转到不同的页面时，背景会在一瞬间变成白色。

有时，当我多次单击复选框时，复选框会出现一些错误。

有谁知道它有什么问题？

谢谢！

 var mode = "default"; function swapStyleSheet(){ var pagestyle = document.getElementById('pagestyle'); var lightSwitch = document.getElementById('lightSwitch'); if(mode == "default"){ pagestyle.setAttribute('href', '../css/dark.css'); lightSwitch.title = "Turn the lights back on"; mode = "dark"; } else { pagestyle.setAttribute('href', '../css/light.css'); lightSwitch.title = "Turn the lights off"; mode = "default"; } } function save(){ var checkbox = document.getElementById('lightSwitch'); localStorage.setItem('lightSwitch', checkbox.checked); load(); //might be fixed by turning load() on (fix this later (glitch makes it so css doesnt load for a sec sometimes and shows white background for split second, (removed buttons(also that when you click save whilst its already activated it will deactive). } function load(){ var checked = JSON.parse(localStorage.getItem('lightSwitch')); document.getElementById("lightSwitch").checked = checked; if (document.getElementById("lightSwitch").checked = checked) { swapStyleSheet(); } } function restore(){ location.reload(); localStorage.clear() } load();

 CSS in header: <link rel="stylesheet" type="text/css" id="pagestyle" href="../css/light.css?parameter=1"> HTML checkbox to activate/deactivate the darkmode Dark mode: <input type="checkbox" id="lightSwitch" onclick="save()" onmousedown="save()">

Answer 1

你的load功能有点乱：

首先，您将#lightSwitch.checked设置为等于checked ，然后您再次设置它：

function load(){    
    var checked = JSON.parse(localStorage.getItem('lightSwitch'));
    document.getElementById("lightSwitch").checked = checked;
    if (document.getElementById("lightSwitch").checked = checked) {
        swapStyleSheet();
    }
}

简化后，您的代码执行以下操作：

var x = true/false;
someproperty = x;
if (someproperty = x)
    doSomething();

您可能希望在if条件之后进行赋值，并且if不应包含赋值：

function load(){    
    var checked = JSON.parse(localStorage.getItem('lightSwitch'));
    if (document.getElementById("lightSwitch").checked !== checked) {
        swapStyleSheet(); // Swap if the value changed
    }
    // assign the changed value
    document.getElementById("lightSwitch").checked = checked; 
}