Lección 5: Eventos y DOM

El DOM (Document Object Model) es la representación en memoria de la página que JavaScript puede leer y modificar.

<button id="miBoton">Hacer clic</button>
<p id="mensaje"></p>

<script>
  const boton = document.getElementById("miBoton");
  const mensaje = document.getElementById("mensaje");

  boton.addEventListener("click", function() {
    mensaje.textContent = "¡Hiciste clic!";
  });
</script>

document.getElementById("id") busca un elemento por su id.
elemento.addEventListener("click", funcion) ejecuta una función cuando ocurre el evento (click, mouseover, etc.).
elemento.textContent = "..." cambia el texto visible.

Ejercicios

Botón con click

Creá un <button id="miBoton">, y con JavaScript usá getElementById y addEventListener('click', ...) para mostrar un mensaje.

Resolver

Cambiar contenido del DOM

Al hacer click en el botón, cambiá el textContent de un <p> usando una función propia (no una función anónima) conectada con addEventListener.

Resolver

Contador de clics

Implementá un contador: cada vez que se hace click en un botón, un número en pantalla aumenta en 1 (usá una variable let fuera de la función).

Resolver