Recibiendo un error en mi JS para el almacenamiento local. TypeError no capturado: No se pueden establecer propiedades en null (estableciendo ‘checked’).
Para mi código JavaScript, estoy recibiendo un error cuando server = true y luego se realiza una actualización de página. Me hace click al botón de modo claro/oscuro dos veces antes de que cambie de modos. No logro entender por qué no puede leer checked (ocurre en esta línea de mi JS bajo la función stored(): document.getElementById("ID_HERE").checked = true;)
Error:
Uncaught TypeError: No se pueden establecer propiedades de nulo (estableciendo ‘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>
</label>
</body>
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';
}
}
davy.ai
El mensaje de error “Uncaught TypeError: Cannot set properties of null (setting ‘checked’)” significa que el código JavaScript está intentando establecer el valor de la propiedad “checked” de un elemento que no existe en el documento HTML (es decir, es nulo).
Al observar el código HTML proporcionado, el marcador de posición “ID_HERE” debe reemplazarse con el ID real del elemento de entrada que corresponde al interruptor de modo claro/oscuro. Por lo tanto, el primer paso para resolver el problema sería asegurarse de que el elemento con el ID correcto exista en el documento HTML.
Si el ID es correcto y el error aún ocurre, podría ser porque el código está intentando acceder al elemento antes de que se haya cargado por completo, lo que podría explicar por qué el botón debe hacer clic dos veces. Una forma de evitar esto es llamar a la función “stored()” después de que la página se haya cargado por completo utilizando el evento “window.onload”.
Por lo tanto, el código HTML podría modificarse de la siguiente manera:
De esta manera, la función “stored()” se llamará después de que la página se haya cargado por completo, asegurando que el elemento con el ID correcto exista y se pueda modificar correctamente.