Bonjour,

Débutant en JS, je m'essaie au JS "dynamique". Pour le moment la tentative n'utilise ni API ni jQuery. Un codage en dur de JSON et du JS vanilla donc. Ca viendra en son temps, pour le moment j'essaie de comprendre les bases.

J'aimerais donc faire un menu déroulant qui filtre le JSON selon le choix de l'utilisateur sans que ce dernier n'ait à valider après avoir fait son choix dans le menu.

Donc pour lui ca donne :

1 cick => ouverture du menu déroulant

1 scroll pour choisir ce qu'il souhaite

1 click pour valider le choix => filtrage et affichage des données du JSON

Après pas mal de recherche (où j'ai compris la moitié de ce que j'ai trouvé, et encore je me sur-estimes...), j'étais parti sur insérer un champ input en hidden dont je ferais varier la valeur (en fonction de l'option choisie dans le select) grâce à onchange dans le select. Puis utiliser un eventListener pour faire varier le filtre avec un switch.

Autant dire que cette approche ne fonctionne pas du tout ! Et je suis complètement perdu pour effectuer la moindre modification :-/

J'ai un boutonCheveux (le menu déroulant) qui est null et une fonction setChev qui est undefined.

Je vous appelle donc à l'aide (mais jaune le sourire, très jaune).

Si possible, ce serait vraiment bien de m'expliquer le raisonnement qui amène au code, histoire que je puisse comprendre la logique du langage.

Merci d'avance

Mise à jour des codes après les recherches du matin. Ca fonctionne toujours pas mais au moins la valeur de l'input change correctement...

Le HTML

<label>Couleur de cheveux</label>
                <input id="inputChev" type="hidden">
                <select id="btn-cheveux" onchange="myChev()">
                    <option value=""></option>
                    <option value="Brune">Brune</option>
                    <option value="Blonde">Blonde</option>
                    <option value="Rousse">Rousse</option>
                </select>

                <script>
                    function myChev() {
                        var chev = document.getElementById("btn-cheveux").value;
                        document.getElementById("inputChev").value = chev;
                    }
                </script>

Le JS

const menuCheveux = document.getElementById("inputChev");
menuCheveux.addEventListener("change", function(){
    const cheveux = product.filter(function(prod){
        return prod.Cheveux == menuCheveux.value;
    });
    document.querySelector(".rightBar").innerHTML="";
    genererMini(cheveux);
});

-
Edité par FlorentDumoulin1 23 juillet 2024 à 13:22:33

Salut

Est-ce que tu veux des explications théoriques ou quelque chose d'adapté à ton code pour des corrections ? Auquel cas, les extraits fournis ne me semblent pas suffisants.

Bonjour,

Et merci de la réponse

Je voulais quelquechose d'adapter à mon code avec des explications sur la réflexion qui entraine ce code (genre tu veux cuire des pates donc faut sortir une casserole et faire bouillir de l'eau).

Finalement, j'ai trouvé la solution (et je me suis senti très bête). Il me semblait l'avoir déjà essayé mais visiblement non. J'ai du mettre onchange dans le JS au lieu de dans le HTML.

La solution donc :

HTML :

<label>Couleur de cheveux</label>
                <select id="btn-cheveux">
                    <option value="-1"></option>
                    <option value="Brune">Brune</option>
                    <option value="Blonde">Blonde</option>
                    <option value="Rousse">Rousse</option>
                </select>

JS :

const menuCheveux = document.getElementById("btn-cheveux");
menuCheveux.addEventListener("change", function(){
    const cheveux = product.filter(function(prod){
        return prod.Cheveux == menuCheveux.value;
    });
    document.querySelector(".rightBar").innerHTML="";
    genererMini(cheveux);
});