Correction: prenom dans l'alerte — expliquer les 2 bugs (.value manquant + lecture trop tot)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CORRECTION_prenom_alert.md

@@ -0,0 +1,81 @@
+# 🔧 Correction — enregistrer et afficher le prénom dans l'alerte
+
+Tu veux qu'au moment de l'envoi, l'alerte affiche le **prénom** saisi. Ton alerte affiche sûrement quelque chose comme :
+
+```
+merci [object HTMLInputElement], ton message a été pris en compte
+```
+
+Voici **pourquoi**, et comment t'en sortir — sans te donner la solution toute faite.
+
+---
+
+## 🔍 Ce que tu as écrit
+
+```js
+const nom = document.getElementById("prenom");
+const greeting = `merci ${nom}, ton message a été pris en compte`;
+// ...
+} else {
+    alert(`${greeting}`);
+}
+```
+
+Il y a **deux soucis** qui se cumulent ici. Bonne nouvelle : tu sais déjà corriger les deux, tu le fais ailleurs dans ton fichier.
+
+---
+
+## 🪤 Souci n°1 — il manque `.value`
+
+`document.getElementById("prenom")` te donne **la case** HTML entière (l'objet `<input>`), pas le texte dedans. Pour obtenir ce que la personne a **tapé**, il faut `.value` — exactement comme tu fais avec `zoneMessage.value` pour la textarea.
+
+```js
+nom              // ❌ la case → s'affiche "[object HTMLInputElement]"
+nom.value        // ✅ le texte tapé → "Mélissa"
+```
+
+C'est ça qui produit le `[object HTMLInputElement]` dans ton alerte.
+
+---
+
+## 🪤 Souci n°2 — tu lis la valeur **trop tôt**
+
+Regarde **où** tu construis `greeting` : tout **en haut** du fichier. Or ce code s'exécute **au chargement de la page**, à un instant où l'utilisateur n'a encore **rien tapé**. Le champ est vide à ce moment-là.
+
+Du coup, même si tu ajoutes `.value`, `greeting` serait figé sur le champ **vide du démarrage**, et ne changerait jamais.
+
+```js
+// en haut du fichier = au chargement → le champ est VIDE
+const greeting = `merci ${nom.value}, ...`;   // ❌ figé sur "" pour toujours
+```
+
+👉 La phrase doit être fabriquée **au moment du clic sur Envoyer**, c'est-à-dire **à l'intérieur** de la fonction `submit`. C'est seulement là que le champ contient ce que la personne a saisi.
+
+> 🔎 Tu as déjà ce réflexe ailleurs : dans `rafraichirCompteur`, tu lis `zoneMessage.value` **au moment** où on tape, pas une fois pour toutes au début. Même logique ici.
+
+---
+
+## 🧩 Ce qu'il te reste à faire (à toi de l'écrire)
+
+1. Garde en haut seulement l'**attrape-élément** : `const champPrenom = document.getElementById("prenom");` (sans `.value`).
+2. Dans le `else` (message non vide), **à ce moment-là**, lis `champPrenom.value` et construis ta phrase, puis `alert(...)`.
+3. Pour l'**enregistrer** : `localStorage.setItem("…", champPrenom.value)` — tu sais déjà faire, tu l'utilises pour le brouillon.
+
+> 💡 Ton formulaire est en `method="get"` : quand l'envoi réussit, **la page se recharge** et l'alerte disparaît aussitôt. Comme il n'y a pas de serveur derrière, le plus simple pour ce TP est d'appeler `evenement.preventDefault()` **aussi** dans le `else`, pour que la page ne recharge pas et que tu voies ton alerte.
+
+---
+
+## ✅ Comment vérifier
+
+1. Tape un prénom + un message, clique **Envoyer** → l'alerte dit « merci **\<ton prénom\>**, … » (et **plus** `[object HTMLInputElement]`).
+2. Console (F12) : tape `localStorage.getItem("…")` (la clé que tu as choisie) → tu retrouves le prénom enregistré.
+3. Laisse le prénom **vide** et envoie → décide quoi faire (afficher « merci visiteur », ou exiger le prénom comme tu le fais déjà pour le message).
+
+---
+
+## 🧪 Pour aller plus loin
+
+- Ajouter le **nombre de caractères** du message dans l'alerte (`…value.length`).
+- Au prochain chargement, accueillir la personne : « Re-bonjour \<prénom\> » en relisant ce que tu as enregistré (`getItem`).
+
+Note ta question si un point bloque encore.