For my javascript I am receiving an error when server = true and then creating a page refresh. It makes me click my lightmode/darkmode button twice before it will change modes. I can not figure out why it can't read checked (occuring at this line in my JS under the stored() function: document.getElementById("ID_HERE").checked = true;)
Error: Uncaught TypeError: Cannot set properties of null (setting 'checked')
HTML:
<body onload="stored(); toggle()">
<label for="ID_HERE" class="toggle-switchy" >
<input checked type="checkbox" name="server" id="ID_HERE">
<span class="toggle" onclick="toggle(); stored()" id="saveDarkLight"></span>
<span class="switch"></span>
</span>
</label>
JS:
function stored() {
const storedValue = localStorage.getItem("server");
if(storedValue === 'true'){
lightmode()
document.getElementById("ID_HERE").checked = true;
}
else{
darkmode()
document.getElementById("ID_HERE").checked = false;
}
}
function toggle() {
if(document.getElementById("ID_HERE").checked) {
lightmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
else {
darkmode()
var input = document.getElementById("ID_HERE");
localStorage.setItem("server", input.checked);
}
}
function darkmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = '#0c0a0f';
}
}
function lightmode() {
const bodyChanges = document.querySelectorAll('.margin_body');
for (let i = 0; i < bodyChanges.length; i++) {
bodyChanges[i].style.background = 'white';
}
}