Tu primer hechizo: un botón que hace algo

Te lo muestro: los tres pasos de cada hechizo

Casi todo lo que JavaScript hace en una página sigue tres pasos:

1. Encontrar un elemento en la página (un botón, un título, una imagen…),
2. escuchar un evento (un clic, pasar el ratón, escribir texto…),
3. hacer algo (cambiar el texto, el color, ocultarlo, mostrarlo…).

Así se ve en código. En el HTML, añade un botón y un párrafo:

<button id="my-button">Click me</button>
<p id="greeting">Nothing has happened yet.</p>

Y en script.js:

// 1. Find the elements by their id
const myButton = document.getElementById("my-button");
const greeting = document.getElementById("greeting");

// 2. Listen for a click on the button
myButton.addEventListener("click", () => {
  // 3. Do something: change the paragraph's text
  greeting.textContent = "The spell works! 🎉";
});

Vamos a desglosar lo nuevo:

• id="my-button" – una etiqueta con nombre para el elemento, parecida a una clase, pero un id solo debe aparecer una vez en la página. JavaScript lo usa para encontrar el elemento.
• const – una caja con nombre (una variable), donde guardamos el elemento que encontramos. Más sobre variables la próxima vez.
• document.getElementById("...") – «página, búscame el elemento con este id».
• addEventListener("click", () => { ... }) – «cuando ocurra un clic, ejecuta lo que hay dentro de las llaves». Esa flecha rara () => {} se llama función – un paquete de código que se ejecuta más tarde.
• textContent – el texto dentro de un elemento. Cuando le asignas texto nuevo, cambia en la página al instante.

Ahora tú 💪

Añade tu primer hechizo a tu web. Elige uno según tu proyecto (o inventa el tuyo):

<button id="lunch-button">What's for lunch today?</button>
<p id="lunch"></p>

const lunchButton = document.getElementById("lunch-button");
const lunch = document.getElementById("lunch");

lunchButton.addEventListener("click", () => {
  lunch.textContent = "Today: pizza and salad! 🍕";
});

<button id="joke-button">Tell me a joke</button>
<p id="joke"></p>

const jokeButton = document.getElementById("joke-button");
const joke = document.getElementById("joke");

jokeButton.addEventListener("click", () => {
  joke.textContent = "Why do programmers prefer dark mode? Because light attracts bugs! 😄";
});

<button id="where-button">Where are we going next?</button>
<p id="where"></p>

const whereButton = document.getElementById("where-button");
const where = document.getElementById("where");

whereButton.addEventListener("click", () => {
  where.textContent = "Packing our bags: we're headed to the beach in Greece! 🌊";
});

<button id="match-button">When's the next match?</button>
<p id="match"></p>

const matchButton = document.getElementById("match-button");
const match = document.getElementById("match");

matchButton.addEventListener("click", () => {
  match.textContent = "Saturday at 10:00, home game vs. Riverside. Come cheer us on! 📣";
});

Extra: dale estilo a tu botón en CSS para que quede bien:

button {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  background-color: #1d4ed8;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #1e40af;
}

Lo que te llevas de esta lección

• Cada hechizo: encontrar un elemento → escuchar un evento → hacer algo.
• document.getElementById("id") encuentra un elemento, addEventListener("click", () => {...}) espera un clic.
• textContent cambia el texto de un elemento al instante, sin recargar la página.

© 2026 Ing. Martin Polak / AlgoRhino · Condiciones de uso del contenido