Vincular JavaScript a HTML y hacer que un botón responda al clic es el primer paso real para darle vida a un proyecto web. Aquí aprenderás cómo conectar un archivo .js externo, seleccionar elementos por su id y escuchar eventos como el clic, usando como ejemplo el botón de seleccionar mascota del juego Mokepon.
¿Cómo se vincula un archivo JavaScript externo a HTML?
La forma profesional de trabajar no es escribir el código dentro del HTML, sino mantenerlo en un archivo aparte. Para eso usas la etiqueta script con el atributo src, que indica la ruta al archivo .js.
La nomenclatura de rutas es sencilla: el punto representa la carpeta actual y el slash separa carpetas y archivos. Si guardas tu código en una subcarpeta llamada js, la ruta queda así:
html
<script src="./js/mokepon.js"></script>
Esto significa que, partiendo desde donde está tu HTML, entras a la carpeta js y dentro buscas el archivo mokepon.js. Para verificar que la conexión funciona, puedes escribir una alert("Hola, mundo JS") dentro del archivo y recargar la página [2:50]. Si aparece la alerta, ya está vinculado.
¿Qué hace el atributo src en la etiqueta script? Le dice al navegador dónde encontrar el archivo JavaScript externo que debe cargar y ejecutar junto con el HTML.
¿Cómo seleccionar un botón con getElementById?
Un HTML real tiene muchos botones: seleccionar, fuego, agua, tierra, reiniciar. Para que JavaScript sepa exactamente cuál escuchar, cada botón necesita un identificador único usando el atributo id.
En el ejemplo se asignan estos identificadores:
boton-mascota para seleccionar la mascota.boton-fuego, boton-agua y boton-tierra para los ataques.boton-reiniciar para reiniciar el juego.
Luego, en el archivo JavaScript, creas una variable que apunta a ese botón usando el método getElementById del objeto document, que representa todo el documento HTML.
javascript
let botonMascotaJugador = document.getElementById("boton-mascota")
Fíjate en el detalle del nombre de la variable: en JavaScript no se aceptan guiones medios dentro de los nombres. La convención más común es camelCase, donde la primera palabra va en minúscula y cada palabra siguiente empieza con mayúscula, sin espacios ni guiones [6:30].
¿Por qué no usar guiones en los nombres de variables?
JavaScript interpreta el guion medio como una operación de resta, así que rompería tu código. El guion bajo sí funciona, pero la comunidad prefiere camelCase por legibilidad y consistencia con la mayoría de librerías.
¿Cómo escuchar el evento clic con addEventListener?
Una vez seleccionado el botón, necesitas decirle a JavaScript qué evento escuchar y qué hacer cuando ocurra. Para eso usas el método addEventListener, que recibe dos argumentos: el tipo de evento y la función a ejecutar.
javascript
botonMascotaJugador.addEventListener("click", seleccionarMascotaJugador)
function seleccionarMascotaJugador() {
alert("Seleccionaste tu mascota")
}
El primer argumento, entre comillas, es el nombre del evento; en este caso "click". El segundo es la función que se dispara cuando el usuario hace clic. Esa función la creas con la palabra reservada function y dentro de las llaves colocas el código a ejecutar [10:20].
¿Qué es addEventListener? Es un método que conecta un elemento HTML con un evento (clic, hover, tecla) y ejecuta una función cuando ese evento ocurre.
¿Por qué aparece el error Cannot read properties of null?
Si al recargar tu página le das clic al botón y nada pasa, abre la consola del navegador con clic derecho e inspeccionar. Probablemente verás un error como:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Ese mensaje significa que JavaScript intentó ejecutar addEventListener sobre algo que es null, es decir, sobre un botón que no encontró. Y aquí viene lo interesante: el problema no es tu código, es el orden de carga.
Si colocas la etiqueta script dentro del head, JavaScript se ejecuta antes de que el navegador haya leído el body. Cuando getElementById busca boton-mascota, ese elemento todavía no existe en el documento [13:40].
¿Cómo se soluciona el error de elemento null?
Hay dos caminos válidos:
- Mover la etiqueta
script justo antes del cierre de </body>, para que el HTML cargue primero.
- Escuchar un evento que avise cuando el documento terminó de cargar, técnica que se cubre en la siguiente clase.
La primera solución es la más rápida para empezar. Apenas reubicas el script al final del body y recargas, el error desaparece y al hacer clic verás la alerta Seleccionaste tu mascota.
Habilidades y conceptos clave de la clase
Esta clase concentra fundamentos que vas a usar en todo proyecto web:
- Vinculación de archivos externos con
script src y rutas relativas usando punto y slash [1:30].
- Atributo id como identificador único de cada elemento HTML para poder seleccionarlo después [5:20].
- document.getElementById como método para acceder a un elemento desde JavaScript [7:00].
- camelCase como convención de nomenclatura para variables y funciones en JavaScript [6:30].
- addEventListener para escuchar eventos como
click y ejecutar funciones [9:30].
- Depuración con la consola del navegador para leer errores de tipo
TypeError [12:50].
- Orden de carga del DOM y por qué afecta a la selección de elementos [13:40].
¿Ya lograste que tu botón responda al clic? Cuéntame en los comentarios qué ID le pusiste a tu botón y si te apareció el error de null en la consola.
