🧩 Aide rapide : créer du contenu dynamique avec JavaScript

🎯 Objectif

Apprendre à modifier le contenu d’une page HTML en fonction des choix de l’utilisateur dans un formulaire.

---

🧠 Principe de base

1. L’utilisateur choisit une option dans un formulaire.

2. Le HTML écoute cet événement (ex. onchange, onclick).

   Ceci peut aussi être fait par Javascript avec ce qu'on appelle un eventListener.

3. Le script modifie le DOM (Document Object Model - le contenu de la page) pour afficher du contenu dynamique.

---

🧪 Exemple 1 : afficher un message selon un choix

HTML

<select id="animal" onchange="afficherChoixAnimal()">
  <option value="">-- Choisis un animal --</option>
  <option value="chat">Chat</option>
  <option value="chien">Chien</option>
  <option value="lapin">Lapin</option>
</select>

<p id="message"></p>

JavaScript

function afficherChoixAnimal()
{
  const select = document.getElementById("animal");
  const message = document.getElementById("message");

  if (select.value == "") {
      message.textContent = "";
  } 
  else {
      message.textContent = "Tu as choisi : " + select.value + " 🐾";
  }
}

---

🧩 Exemple 2 : afficher une image selon le choix

HTML

<select id="fruit" onchange="afficherImageFruit()">
  <option value="">-- Choisis un fruit --</option>
  <option value="pomme">Pomme</option>
  <option value="banane">Banane</option>
  <option value="fraise">Fraise</option>
</select>

<img id="fruitImage" src="" alt="">

JavaScript

function afficherImageFruit() {
  const fruitSelect = document.getElementById("fruit");
  const fruitImage = document.getElementById("fruitImage");
  const fruit = fruitSelect.value;

  if (fruit == "") {
    fruitImage.src = "";
    fruitImage.alt = "";
  } else {
    fruitImage.src = fruit + ".jpg"; // Exemple : pomme.jpg
    fruitImage.alt = fruit;
  }
}

---

⚙️ Exemple 3 : créer du contenu HTML dynamique

Ce dernier exemple est la méthode à utiliser pour créer une page dans laquelle on ne peut savoir d'avance ce qu'on doit y afficher.

Par exemple:

• Les résultats d'une recherche
• Un panier d'achats en ligne

HTML

<form id="formulaire">
  <input type="text" id="nom" placeholder="Ton prénom">
  <button type="button" id="valider" onclick="afficherMessage()">Afficher le message</button>
</form>

<div id="zoneAffichage"></div>

JavaScript

function afficherMessage() {
  const zone = document.getElementById("zoneAffichage");

  const nom = document.getElementById("nom").value;

  if (nom.trim() != "") {
    let nouveauTitre = document.createElement("h2");
    nouveauTitre.innerText = "Bonjour, " + nom;
    nouveauTitre.classList.add("text-primary");
    zone.appendChild(nouveauTitre);
  } 
}