Para mi javascript, recibo un error cuando el servidor = verdadero y luego creo una actualización de página. Me hace hacer clic en mi botón de modo claro/modo oscuro dos veces antes de que cambie de modo. No puedo entender por qué no se puede leer marcado (ocurriendo en esta línea en mi JS bajo la función almacenada (): document.getElementById("ID_HERE").checked = true; )
Error: TypeError no capturado: no se pueden establecer propiedades de nulo (configuración 'marcada')
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'; } }