DOM y eventos: conectar JavaScript con HTML

Seleccionar un elemento

document.querySelector acepta un selector CSS y devuelve el primer elemento que coincide. Si no hay coincidencia, devuelve null. Un selector con # busca un id y uno con punto busca una clase. Comprueba el resultado antes de intentar usarlo.

Escuchar eventos

addEventListener registra una función que se ejecuta cuando ocurre un evento, como click o input. Registra la función sin invocarla inmediatamente. El objeto event contiene información sobre el evento; event.target indica el objeto al que se dirigió.

Ejemplo completo: contador

Guarda este fragmento en un documento HTML. El script está después del botón y del párrafo, de modo que esos elementos ya existen cuando se buscan. Cada clic incrementa el contador y reemplaza el texto del párrafo.

<button id="sumar" type="button">Sumar visita</button>
<p id="resultado" aria-live="polite">Visitas: 0</p>
<script>
  const boton = document.querySelector("#sumar");
  const resultado = document.querySelector("#resultado");
  let visitas = 0;
  if (boton && resultado) {
    boton.addEventListener("click", () => {
      visitas += 1;
      resultado.textContent = "Visitas: " + visitas;
    });
  }
</script>

Texto y HTML tienen efectos distintos

textContent coloca contenido como texto y no lo interpreta como etiquetas. innerHTML interpreta HTML, por lo que no debes insertar directamente contenido no confiable mediante esa propiedad. Para mostrar un nombre o mensaje como texto, textContent evita esa interpretación.

Errores frecuentes y práctica

1. Si querySelector devuelve null, revisa el selector y el momento en que se ejecuta el script.
2. Comprueba que un clic sume exactamente una visita; registrar el mismo comportamiento varias veces puede duplicarlo.
3. Añade un botón para restablecer el contador y prueba la interacción con teclado.