Solución de errores en variables y elementos HTML en JavaScript

Clase 51 de 84 • Curso Gratis de Programación Básica

Resumen

En algunas oportunidades, la declaración de una variable va a depender de un proceso previo, pudiendo ocurrir errores en el software si no tienes los cuidados necesarios en el orden de ejecución de cada línea de código.

Orden de ejecución del código

Si deseas capturar elementos HTML, tienes que estar seguro de que los mismos ya existen al momento de que el código Javascript se procese.

Suponiendo que tienes algunos elementos HTML en tu página web:

<div id="Hipodoge">
    ...
</div>
<div id="Capipepo">
    ...
</div>
<div id="Ratigueya">
    ...
</div>

Que posteriormente puedes capturar con Javascript:

const hipodoge = document.getElementById('Hipodoge');
const capipepo = document.getElementById('Capipepo');
const ratigueya = document.getElementById('Ratigueya');

Siempre asegúrate de que el script de Javascript, se procese al final del renderizado del código HTML. Por lo tanto, colócalo al final de la etiqueta:
<body>

    ...
    <script src="./js/mokepon.js"></script>
</body>

Si tienes un forEach() que crea dinámicamente etiquetas HTML, en estos escenarios debes tener cuidado, dado que el código HTML aún no existe y debes procurar realizar la captura de las variables posteriormente a ese forEach().

Tal vez te sea algo difícil imaginar la secuencia de ejecución de código para ti al principio, pero es un gran ejercicio que con el tiempo lograrás dominar y evitarás problemas en una aplicación.

Contribución creada por: Kevin Fiorentino (Platzi Contributor)