Es posible que pueda deberse a que el documento aún no se ha terminado de parsear y cargar.
Como recomendación, algunos puntos importantes:
Sé consciente del proceso de parseo y carga del HTML
Todo documento pasa por ubauna etapa de parseo y finalmente se carga y pasa a estar disponible. El DOM (Object Document Model) es una interface que te permite interactuar con el documento. Esta interface es la encargada de interactuar con el HTML almacenando cada etiqueta en un Nodo dentro de un árbol, el cual no es más que la representación de la etiqueta en una interface.
¿Qué tiene que ver esto con tu pregunta? Que cuando interaccionas con el documento cuando aún no ha sido completamente cargado, es muy probable que obtengas una referencia nula porque aún no ha sido parseado y no está disponible en el árbol DOM.
Una buena práctica es seleccionar los elemetos cuando el documento ha sido cargado. En javascript puro se hace capturando el evento DOMContentLoaded
:
document.addEventListener('DOMContentLoaded', function() {
// selecciona los elementos aquí
});
En jquery se hace mediante el evento personalizado ready
:
$(document).on('ready', function() {
// selecciona los elementos aquí
});
Así te aseguras que los nodos estén disponibles en el árbol DOM.
No pongas scripts en la cabecera
A no ser que marques estos scripts con el atributo async
o defer
, no los pongas en la cabecera porque el parseo del documento no proseguirá hasta que los scripts hayan sido resueltos. En su lugar pon los scripts antes del cierre del body:
<script>
// código abcdeghi
</script>
</body>
Ten en cuenta estos puntos al interactuar con los elementos.