Ese mensaje indica que, el elemento en cuestión, no existe. Posiblemente se deba a que el bloque de código JavaScript se haya ejecutado antes de que cargue el árbol de elementos del documento. Si tienes el código JavaScript en la cabecera y no controlas su ejecución, es decir, si no te apoyas en un evento para disparar la ejecución del código, este se ejecutará antes de que haya cargado el DOM (los elementos del documento) y, por ende, estos no se verán afectados por tu
script.
En un caso así, puedes hacer lo siguiente:
1. Colocar el bloque de código JavaScript después de todos los elementos:
Código Javascript
:
Ver original<body>
<!-- Aquí irán tus elementos HTML -->
<script type="text/javascript">
//Aquí irá tu código JavaScript
</script>
</body>
2. Ejecutar el código JavaScript cuando se haya completado la carga del DOM:
Código Javascript
:
Ver originaldocument.addEventListener("DOMContentLoaded", function(){
//Aquí irá tu código JavaScript
}, false);
3. Ejecutar el código JavaScript cuando se haya completado la carga del DOM y sus recursos (audio, vídeo, imágenes, frames):
Código Javascript
:
Ver originalwindow.addEventListener("load", function(){
//Aquí irá tu código JavaScript
}, false);
4. También puedes usar esta forma:
Código Javascript
:
Ver originaldocument.addEventListener("readystatechange", function(){
switch (this.readyState){
case "loading":
//Ejecuta el código JavaScript cuando esté cargando el documento
break;
case "interactive":
//Equivalente al evento DOMContentLoaded
break;
case "complete":
//Equivalente al evento load
break;
}
}, false);
