diff --git a/CORRECTION_prenom_alert.md b/CORRECTION_prenom_alert.md new file mode 100644 index 0000000..59ce113 --- /dev/null +++ b/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 ``), 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 **\**, … » (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 \ » en relisant ce que tu as enregistré (`getItem`). + +Note ta question si un point bloque encore.