Disculpen la pregunta: mi botón no hace nada y la consola dice 'Cannot read properties of null'
Rosa Quispe@rosa_aprende
Hola, disculpen si es muy básica. Estoy haciendo una lista de tareas para practicar. Cuando hago clic en el botón no pasa nada y en la consola sale esto:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at app.js:3Mi HTML:
<head>
<script src="app.js"></script>
</head>
<body>
<input id="tarea" type="text">
<button id="agregar">Agregar</button>
<ul id="lista"></ul>
</body>Mi app.js:
const boton = document.getElementById('agregar')
const lista = document.getElementById('lista')
boton.addEventListener('click', () => {
const texto = document.getElementById('tarea').value
lista.innerHTML += '<li>' + texto + '</li>'
})Lo que ya probé:
- Revisé que el id sea igual, "agregar" en los dos
- Cambié getElementById por querySelector('#agregar') y sale lo mismo
- Borré la caché del navegador
Ya no sé qué más hacer pe. Gracias de antemano 🙏
Accepted answer
Hola Rosa, nada de disculpas, tu pregunta está perfecta: con el error y lo que ya probaste, así da gusto ayudar.
El problema es que el script está en el <head>. El navegador lo ejecuta ANTES de crear el botón, entonces getElementById('agregar') devuelve null, y null no tiene addEventListener. Dos soluciones:
1. Agrégale defer: <script src="app.js" defer></script>. Así se descarga en paralelo pero se ejecuta cuando el HTML ya está listo. Es lo que yo uso siempre.
2. O mueve el <script> al final del body, justo antes de cerrarlo.
Y un extra: lista.innerHTML += con el texto del usuario es peligroso, si alguien escribe HTML se mete en tu página. Mejor así:
const li = document.createElement('li')
li.textContent = texto
lista.appendChild(li)
¡Vas muy bien!
Get the best of #codigo_en_espanol weekly
One email each Monday with the most useful posts. No spam; unsubscribe in one click.
Comments
Sign in to join the conversation.
Sign in to commentAccepted answer
Camilo Restrepo@camilo_parce
Hola Rosa, nada de disculpas, tu pregunta está perfecta: con el error y lo que ya probaste, así da gusto ayudar.
El problema es que el script está en el <head>. El navegador lo ejecuta ANTES de crear el botón, entonces getElementById('agregar') devuelve null, y null no tiene addEventListener. Dos soluciones:
1. Agrégale defer: <script src="app.js" defer></script>. Así se descarga en paralelo pero se ejecuta cuando el HTML ya está listo. Es lo que yo uso siempre.
2. O mueve el <script> al final del body, justo antes de cerrarlo.
Y un extra: lista.innerHTML += con el texto del usuario es peligroso, si alguien escribe HTML se mete en tu página. Mejor así:
const li = document.createElement('li')
li.textContent = texto
lista.appendChild(li)
¡Vas muy bien!
Rosa Quispe@rosa_aprende
¡FUNCIONÓ! puse defer y ya agrega las tareas 😭 muchas gracias Camilo. Lo de textContent también lo cambié, no sabía eso de innerHTML. Chévere, de verdad
Luis Treviño@luis_qa_mty
Todos hemos tenido ese error, Rosa. Tip de QA: cuando veas 'of null', pregúntate '¿el elemento ya existe cuando corre mi código?'. 90% de las veces es eso
Sofía Ramírez@sofi_dev_mx
Rosa qué bueno que preguntaste así de clarito 💜 y lo de textContent que te dijo Camilo es súper importante. Se llama XSS y vas a escuchar mucho de eso
Daniela Castaño@dani_ctf
Desde seguridad apoyo lo de textContent 100%. Sumercé va bien, ya está pensando en XSS sin saberlo 😄
Rosa Quispe@rosa_aprende
jaja no sabía que estaba pensando en seguridad. Gracias a todos, ya pe, sigo con mi lista 🙏