Ton premier sort : un bouton qui fait quelque chose

Montre-moi : les trois étapes de chaque sort

Presque tout ce que JavaScript fait sur une page suit trois étapes :

1. Trouver un élément sur la page (un bouton, un titre, une image…),
2. écouter un événement (un clic, passer la souris, taper du texte…),
3. faire quelque chose (changer le texte, la couleur, le cacher, l’afficher…).

Voici à quoi ça ressemble en code. Dans le HTML, ajoute un bouton et un paragraphe :

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

Et dans 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! 🎉";
});

Décortiquons les nouveautés :

• id="my-button" – une étiquette pour l’élément, similaire à une classe, mais un id ne doit apparaître qu’une fois sur la page. JavaScript l’utilise pour trouver l’élément.
• const – une boîte avec un nom (une variable), où on stocke l’élément trouvé. Plus sur les variables la prochaine fois.
• document.getElementById("...") – « page, trouve-moi l’élément avec cet id. »
• addEventListener("click", () => { ... }) – « quand un clic arrive, exécute ce qui est entre les accolades. » Cette drôle de flèche () => {} s’appelle une fonction – un paquet de code qui s’exécute plus tard.
• textContent – le texte à l’intérieur d’un élément. Quand tu lui assignes un nouveau texte, il change sur la page instantanément.

À toi 💪

Ajoute ton premier sort à ton site web. Choisis-en un selon ton projet (ou invente le tien) :

<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 : stylise ton bouton en CSS pour qu’il soit joli :

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

Ce que tu retiens de cette leçon

• Chaque sort : trouver un élément → écouter un événement → faire quelque chose.
• document.getElementById("id") trouve un élément, addEventListener("click", () => {...}) attend un clic.
• textContent change le texte d’un élément instantanément, sans recharger la page.

© 2026 Ing. Martin Polak / AlgoRhino · Conditions d'utilisation du contenu