Cómo hacer que un botón funcione en JavaScript (eventos)

Un evento es algo que pasa: un clic, una tecla, mover el dedo. Para reaccionar se usa addEventListener, que se lee "agrega un escuchador".

Recibe dos cosas: qué escuchar y qué hacer cuando ocurra. Esa segunda parte es una función — las mismas del módulo anterior.

<button id="boton" style="padding:12px 20px;font-size:15px">
  Tócame
</button>
<p id="salida" style="padding:0 12px">Todavía no me tocan</p>

<script>
  const boton = document.getElementById("boton");
  const salida = document.getElementById("salida");
  let veces = 0;

  boton.addEventListener("click", function () {
    veces++;
    salida.textContent = "Me tocaste " + veces + " veces";
  });
</script>

Un campo de texto es <input>. Para saber qué escribieron se usa .value.

Acuérdate de esto: lo que sale de un input siempre es texto, aunque escriban un número. Es exactamente el problema del "5" + "3" que viste en variables.

<div style="padding:12px">
  <input id="campo" placeholder="Escribe tu nombre"
         style="padding:9px;font-size:15px">
  <button id="ok" style="padding:9px 16px">Saludar</button>
  <p id="saludo"></p>
</div>

<script>
  const campo = document.getElementById("campo");
  const saludo = document.getElementById("saludo");

  document.getElementById("ok").addEventListener("click", function () {
    const nombre = campo.value.trim();   // trim quita espacios sobrantes

    if (nombre === "") {
      saludo.textContent = "Escribe algo primero";
    } else {
      saludo.textContent = "¡Hola, " + nombre + "!";
    }
  });
</script>

Acá está todo junto: un input, una lista de objetos que crece, y la página que se redibuja sola. Es, en pequeño, cómo funciona cualquier aplicación web.

<div style="padding:12px">
  <input id="tarea" placeholder="¿Qué hay que hacer?"
         style="padding:9px;font-size:15px;width:60%">
  <button id="agregar" style="padding:9px 16px">Agregar</button>
  <ul id="lista"></ul>
</div>

<script>
  const tareas = [];                                  // los datos
  const campo = document.getElementById("tarea");
  const lista = document.getElementById("lista");

  function dibujar() {                                // pinta los datos
    lista.innerHTML = "";                             // borrar lo anterior
    for (let t of tareas) {
      const li = document.createElement("li");
      li.textContent = t;
      lista.appendChild(li);
    }
  }

  document.getElementById("agregar").addEventListener("click", function () {
    const texto = campo.value.trim();
    if (texto === "") return;                         // salir si está vacío

    tareas.push(texto);                               // cambiar los datos
    campo.value = "";                                 // limpiar el campo
    dibujar();                                        // volver a pintar
  });
</script>

Escuchar eventos con addEventListener, leer un input con .value, validar antes de usar, y el patrón de cambiar datos y redibujar.

Tu lista funciona… hasta que se recarga la página y se pierde todo. Eso lo arreglamos en el siguiente.

Botones y formularios

Buttons and forms