Il tuo primo incantesimo: un pulsante che fa qualcosa

Te lo mostro: i tre passi di ogni incantesimo

Quasi tutto ciò che JavaScript fa su una pagina segue tre passi:

1. Trova un elemento sulla pagina (un pulsante, un titolo, un’immagine…),
2. ascolta un evento (un clic, passaggio del mouse, digitazione…),
3. fai qualcosa (cambia il testo, il colore, nascondilo, mostralo…).

Ecco com’è nel codice. Nell’HTML, aggiungi un pulsante e un paragrafo:

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

E in 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! 🎉";
});

Analizziamo le novità:

• id="my-button" – un’etichetta per l’elemento, simile a una classe, ma un id dovrebbe comparire solo una volta sulla pagina. JavaScript lo usa per trovare l’elemento.
• const – una scatola con un nome (variabile), dove mettiamo l’elemento trovato. Più sulle variabili la prossima volta.
• document.getElementById("...") – “pagina, trovami l’elemento con questo id.”
• addEventListener("click", () => { ... }) – “quando succede un clic, esegui quello che c’è tra le parentesi graffe.” Quella freccia strana () => {} si chiama funzione – un pacchetto di codice che parte dopo.
• textContent – il testo dentro un elemento. Quando gli assegni testo nuovo, cambia subito sulla pagina.

Ora tocca a te 💪

Aggiungi il tuo primo incantesimo al sito web. Scegline uno in base al progetto (oppure inventane uno tuo):

<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! 📣";
});

Bonus: stila il pulsante in CSS così è bello:

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;
}

Cosa porti via da questa lezione

• Ogni incantesimo: trova un elemento → ascolta un evento → fai qualcosa.
• document.getElementById("id") trova un elemento, addEventListener("click", () => {...}) aspetta un clic.
• textContent cambia il testo di un elemento all’istante, senza ricaricare la pagina.

© 2026 Ing. Martin Polak / AlgoRhino · Condizioni d'uso dei contenuti