Estoy tratando de verificar si mi casilla de verificación está marcada. He buscado muchas soluciones, y todas apuntan a esto:
html:
<body> <input type="checkbox" id="terms" name="terms" /> <label for="terms">Agree with terms</label>JavaScript:
let checkbox = document.querySelector("#terms"); console.log(checkbox.checked);Pero la consola está regresando:
"Uncaught TypeError: Cannot read properties of null (reading 'checked')"No hay otro código que interfiera con esto, ya que lo reduje a este pequeño ejemplo para ver si mi proyecto estaba interfiriendo con la funcionalidad, pero incluso con el código más básico '.checked' devuelve un error. ¿Ha habido una actualización de esta función?
<input type="checkbox" id="terms" name="terms" /> <label for="terms">Agree with terms</label> <script> let checkbox = document.querySelector("#terms"); checkbox.addEventListener('change', () => { console.log(checkbox.checked); }) </script>o
let checkbox = document.querySelector("#terms"); console.log(checkbox.checked);Descubrí el problema, no estaba incluyendo 'aplazar' en mi enlace script.js. Esta todo arreglado gracias!
Te encontrarás con problemas inesperados si usas defer .
En su lugar, utilice el evento DOMContentLoaded para activar su secuencia de comandos.
El uso de defer permite que la secuencia de comandos se ejecute después de que se termine de analizar el DOM, pero antes de que se cargue el contenido del DOM.
Es probable que su secuencia de comandos diferida se ejecute demasiado pronto y se bloquee cuando intente acceder a un elemento que aún no existe.
Puede vincular su secuencia de comandos en <head> siempre que la ejecute cuando se active ese evento.
document.addEventListener('DOMContentLoaded', function () { let checkbox = document.querySelector("#terms"); checkbox.addEventListener('change', () => { console.log(checkbox.checked); }) }) EDITAR: para responder a la pregunta de su comentario anterior, vincular el archivo JavaScript en el head significa que se ejecutará antes de que se construya el html .
Poner el código en una etiqueta de secuencia de comandos en el html significa que no se ejecutará hasta que se haya activado DOMContentLoaded .
Eso sucede después del enlace usando defer y después de que el script se ejecuta desde el head .
Envuelva su código para que solo se ejecute en DOMContentLoaded y evitará muchos dolores de cabeza en el futuro 😎