diff --git a/CORRECTION_filtre_tri.md b/CORRECTION_filtre_tri.md new file mode 100644 index 0000000..e98f202 --- /dev/null +++ b/CORRECTION_filtre_tri.md @@ -0,0 +1,80 @@ +# 🔧 Correction — la recherche et le tri ne font rien + +Tu as bien créé la fonction `afficherEquipe`, et le tableau s'affiche au chargement. Mais quand tu tapes dans la recherche ou que tu cliques « Trier », **rien ne bouge**. Voici pourquoi — c'est un bug très instructif sur les **paramètres de fonction**. + +--- + +## 🔍 D'abord, un indice important : la Console est *muette* cette fois + +La fois précédente, tu avais une erreur **rouge** dans la Console (`afficherEquipe is not defined`). Là, **rien** : aucun message d'erreur. + +> 💡 **À retenir :** il existe deux familles de bugs. +> - Ceux qui **plantent** (message rouge dans la Console) — comme la dernière fois. +> - Ceux qui **ne plantent pas** mais font **la mauvaise chose** — comme aujourd'hui. La Console reste silencieuse, le code « marche »… mais pas comme tu veux. Ce sont les plus sournois : il faut **raisonner**, pas juste lire les erreurs. + +--- + +## 🎯 Le vrai problème : ta fonction ignore ce que tu lui donnes + +Regarde **précisément** ces deux endroits dans ton `equipe.js` : + +```js +function afficherEquipe() { // 👈 (1) les parenthèses sont VIDES + corps.innerHTML = ""; + for (const membre of equipe) { // 👈 (2) tu boucles toujours sur la globale "equipe" + corps.append(creerLigne(membre)); + } +} +``` + +Et plus bas, tu l'appelles avec une liste : + +```js +afficherEquipe(resultats); // la liste filtrée +afficherEquipe(triee); // la liste triée +``` + +Le souci : tu **passes** une liste (`resultats`, `triee`)… mais ta fonction ne la **reçoit nulle part**. Les parenthèses de `function afficherEquipe()` sont vides → l'argument que tu envoies tombe dans le vide. Et à l'intérieur, tu reboucles sur la variable globale `equipe`, donc **toujours les 3 membres, dans l'ordre d'origine**. + +👉 Résultat : `filter` calcule bien la bonne liste filtrée, `sort` calcule bien la liste triée… et ta fonction **les jette** pour réafficher `equipe` en entier à chaque fois. D'où l'impression que « rien ne se passe ». + +--- + +## 🧠 L'idée à comprendre : un *paramètre*, c'est une boîte d'entrée + +Une fonction, c'est une recette. Un **paramètre**, c'est un ingrédient qu'on lui **tend** au moment de l'appeler. + +- Si la recette dit *« utilise la liste que je te donne »* → tu peux lui tendre une liste différente à chaque fois, et le résultat change. +- Ta recette actuelle dit *« ignore ce qu'on me tend, je prends toujours `equipe` sur l'étagère »* → quoi que tu lui passes, elle fait pareil. + +Tu as **déjà** utilisé ce mécanisme sans bug ailleurs : ta fonction `creerLigne(membre)` reçoit bien un `membre` entre les parenthèses, et travaille avec **lui**. C'est exactement la même chose qu'il manque ici. + +--- + +## 🛠️ La piste pour corriger (à toi de l'écrire) + +1. Donne un **nom** au paramètre dans les parenthèses de `afficherEquipe` (par exemple `liste`). +2. À l'intérieur, boucle sur **ce nom-là**, pas sur la globale `equipe`. +3. Garde ton appel initial, mais en lui passant bien toute l'équipe : `afficherEquipe(equipe)`. + +Ainsi : +- au chargement, tu lui tends `equipe` → elle affiche tout le monde ; +- quand tu tapes, tu lui tends `resultats` → elle affiche **la liste filtrée** ; +- quand tu cliques, tu lui tends `triee` → elle affiche **la liste triée**. + +> ⚠️ **Petit piège à éviter :** n'appelle pas ton paramètre `equipe` (le même nom que la globale). Ça « marcherait » mais ce serait très déroutant à relire. Un nom différent comme `liste` rend les choses claires : on voit tout de suite que la fonction travaille sur *ce qu'on lui donne*, pas sur une variable extérieure. + +--- + +## ✅ Comment vérifier que c'est réglé + +1. Tape « mé » dans la recherche → seule Mélissa reste. Efface → les 3 reviennent. +2. Clique « Trier A → Z » → l'ordre change (Guillaume, Matthieu, Mélissa). + +Le reste de ton code (`filter`, `sort`) est **déjà correct** : il calcule la bonne liste. Le seul maillon cassé, c'est la fonction qui ne l'utilise pas. Répare ce maillon et tout le reste se met à marcher d'un coup. + +--- + +## 🚀 Si tu veux aller plus loin (optionnel) + +Une fois que ça marche, regarde la méthode **`replaceChildren`** (`MDN replaceChildren`) : elle vide et remplit un élément **en une seule ligne**, sans `innerHTML`. Combinée à `map` (Niveau 5), ta fonction pourrait tenir en deux lignes. Mais d'abord, fais marcher la version simple. 🙂