diff --git a/CORRECTION_localstorage.md b/CORRECTION_localstorage.md new file mode 100644 index 0000000..1d025c5 --- /dev/null +++ b/CORRECTION_localstorage.md @@ -0,0 +1,91 @@ +# 🔧 Correction — le nombre revient à 1 au rechargement + +Bonne nouvelle d'abord : ton `localStorage` **fonctionne**. Ton `console.log("dans le local : ", ...)` au chargement te montre la valeur enregistrée → la lecture marche, tu ne passes **pas** dans le `else`. + +Alors pourquoi l'écran affiche « 1 » ? Parce qu'il manque **une seule chose**. + +--- + +## 1. 🎯 Le vrai problème : tu lis la valeur, mais tu ne l'**affiches** pas + +Au chargement, tu fais bien ceci : + +```js +let nbVehicules; +if (localStorage.getItem("nbVehicules") !== null) { + nbVehicules = localStorage.getItem("nbVehicules"); // ✅ la variable vaut bien, par ex. "12" +} else { + nbVehicules = 1; +} +``` + +Donc la **variable** `nbVehicules` vaut bien 12. **Mais** ton `` dans le HTML, lui, contient toujours le « 1 » écrit en dur : + +```html +1 +``` + +Et **rien**, au chargement, ne vient remplacer ce « 1 » par la valeur de `nbVehicules`. Tes fonctions `mettreAJour…` ne sont appelées **que** dans les clics `+` et `−`. Au démarrage, aucune n'est appelée → l'écran reste sur le « 1 » du HTML. + +> 🔎 C'est ça qui donne l'impression « ça passe dans le `else` ». En réalité, la lecture est bonne ; c'est juste que **la variable a changé, pas l'affichage**. La variable et ce qui est écrit à l'écran sont **deux choses différentes** : changer l'une ne change pas l'autre toute seule — il faut le dire explicitement avec `.textContent`. + +### ✅ La piste +Juste **après** ton `if/else` de chargement, **appelle une fois** ta fonction d'affichage (par ex. `mettreAJourTOTAL()`), pour que l'écran se mette d'accord avec la variable. + +> 💡 **À retenir :** au chargement d'une page, il faut **afficher l'état initial** soi-même. La règle générale : *« quand la donnée change (ici : au démarrage, on la relit du storage), on rappelle la fonction qui met l'affichage à jour. »* + +**✅ Test :** règle 12 véhicules, recharge (F5) → l'écran affiche 12 tout de suite. + +--- + +## 2. ⚠️ Le piège qui va te tomber dessus juste après : texte vs nombre + +`localStorage` ne stocke **que du texte**. Donc après lecture, `nbVehicules` vaut la **chaîne** `"12"`, pas le **nombre** `12`. + +Conséquence au prochain clic sur `+` : +```js +nbVehicules = nbVehicules + 1; // "12" + 1 → "121" (et pas 13 !) +``` +Avec du texte, le `+` **colle** au lieu d'**additionner**. Tu vas voir des « 121 », « 1211 »… + +### ✅ La piste +Convertis la valeur lue en **nombre** au moment de la relire : +```js +nbVehicules = parseInt(localStorage.getItem("nbVehicules")); +``` +(cherche `parseInt` si besoin — ça transforme `"12"` en `12`.) + +> 💡 **À retenir :** tout ce qui sort de `localStorage` est du **texte**. Si tu veux faire des calculs avec, reconvertis-le en nombre (`parseInt` pour un entier). + +--- + +## 3. 🐛 Une vraie erreur cachée dans ton bouton `+` + +Regarde ces lignes (bouton `+`) : + +```js +console.log("dans le store", localStorage.getItem("nbVehicules"))( + mettreAJourGPS(), + mettreAJourCONSO(), +); +``` + +Il **manque un point-virgule** après le `console.log(...)`. Du coup JavaScript lit la parenthèse de la ligne suivante comme un **appel** : il essaie d'« appeler » le résultat de `console.log` (qui ne renvoie rien) → erreur dans la console : *`console.log(...) is not a function`*. + +### ✅ La correction : deux instructions séparées, chacune finie par `;` +```js +console.log("dans le store", localStorage.getItem("nbVehicules")); +mettreAJourTOTAL(); // (ou tes deux fonctions, mais une seule suffit) +``` + +> 🔎 **Pourquoi ce bug ?** Quand une ligne **commence par une parenthèse `(`** et que la précédente n'a pas de `;`, JavaScript croit que tu enchaînes un appel. C'est exactement le piège que crée `(mettreAJourGPS(), mettreAJourCONSO())` collé à la ligne d'avant. Mets tes `;` en fin de ligne et garde **une seule** fonction d'affichage (cf. la correction précédente sur le ménage) : tout devient plus simple et plus sûr. + +--- + +## ✅ Récap + +- [ ] Appeler la fonction d'affichage **une fois au chargement**, après le `if/else` (→ corrige le « reste à 1 ») +- [ ] `parseInt(...)` sur la valeur relue du storage (→ évite « 121 ») +- [ ] Remettre le `;` manquant et n'avoir **qu'une** fonction d'affichage appelée proprement + +L'idée clé de tout ça : **une variable ≠ ce qui est affiché**. Le JavaScript ne « rafraîchit » l'écran que quand tu le lui demandes (`textContent`). Une fois ce réflexe acquis, ce genre de bug disparaît tout seul.