diff --git a/CORRECTION_fetch_et_boutons.md b/CORRECTION_fetch_et_boutons.md new file mode 100644 index 0000000..cbf66c1 --- /dev/null +++ b/CORRECTION_fetch_et_boutons.md @@ -0,0 +1,119 @@ +# 🔧 Corrections — `fetch` (le 200), script qui ne charge pas, et boutons + +Tu vois un **`200`** dans la console **Python** mais tu ne vois pas la rĂ©ponse. C'est normal, et il y a plusieurs petites choses Ă  dĂ©mĂȘler. On commence par le plus important. + +--- + +## 1. 🐛 LE bug bloquant : ta balise ` +``` + +Regarde bien : aprĂšs `"../flotte.js"`, il **manque le `>`** qui ferme la balise ouvrante. Du coup le navigateur ne charge **pas** `flotte.js` du tout → **rien** ne s'exĂ©cute, mĂȘme pas ton `console.log`. C'est pour ça que « ça ne s'affiche pas dans la console ». + +### ✅ Correction +```html + +``` + +> 💡 **À retenir :** une balise ``. Compare avec tes deux autres lignes juste au-dessus (`../equipe.js`, `../contact.js`) : elles, elles ont bien le `>`. C'est ce petit `>` qui manque. + +--- + +## 2. 🧠 Le `200` de Python ≠ « j'ai affichĂ© les donnĂ©es » + +C'est **la** notion Ă  comprendre ici. Quand tu lances `python3 -m http.server`, tu as **deux mondes** : + +| Le **serveur** (terminal Python) | Le **navigateur** (ta page) | +|---|---| +| Reçoit les demandes de fichiers et les envoie | Reçoit les fichiers et exĂ©cute le JavaScript | +| Affiche des lignes comme `"GET /vehicules.json" 200` | Affiche tes `console.log` dans **F12 → Console** | + +Le **`200`** veut juste dire : *« le serveur a bien trouvĂ© et envoyĂ© le fichier »*. C'est **cĂŽtĂ© serveur**. Ça ne dit **rien** de ce que ta page en fait. + +👉 Donc : +- La **rĂ©ponse** (tes donnĂ©es) arrive dans le **navigateur**, pas dans le terminal Python. Pour la voir, regarde la **console du navigateur (F12)**, pas le terminal. +- Et pour l'afficher **sur la page**, ton `console.log(vehicules)` ne suffit pas : il Ă©crit juste dans la console. Il faudra **construire des lignes** dans le HTML (boucle + `createElement`/`append`, comme pour ton tableau d'Ă©quipe). + +> 💡 **À retenir :** `200` (terminal Python) = « fichier envoyĂ© », cĂŽtĂ© serveur. `console.log` = cĂŽtĂ© navigateur (F12). Afficher **dans la page** = encore une autre Ă©tape (du code qui crĂ©e des Ă©lĂ©ments HTML). + +--- + +## 3. 🐛 Le chemin du fichier dans `fetch` + +Dans `flotte.js` : + +```js +const reponse = await fetch("./vehicules.json"); // ⚠ Ă  vĂ©rifier +``` + +Attention : le chemin d'un `fetch` est calculĂ© **par rapport Ă  la page** (`pages/contact.html`), pas par rapport au fichier `flotte.js`. Or `vehicules.json` est Ă  la **racine** du projet, pas dans `pages/`. + +- `./vehicules.json` → cherche `pages/vehicules.json` → **n'existe pas** (erreur 404). +- `../vehicules.json` → **remonte** d'un dossier puis prend `vehicules.json` Ă  la racine ✅ + +C'est exactement la mĂȘme logique que tes balises `` (le `>` manquant) +- [ ] Comprendre : `200` Python = fichier envoyĂ© ; la rĂ©ponse se voit dans **F12 → Console** +- [ ] Corriger le chemin : `fetch("../vehicules.json")` (vĂ©rifier dans l'onglet RĂ©seau) +- [ ] Afficher la flotte dans la page (boucle + `createElement`), pas seulement `console.log` +- [ ] `type="button"` sur « Effacer » +- [ ] `label for="email"` (= l'id du champ)