Formulaire a choix multiples [Résolu]

Ce script me permet d'appliquer un prix a chaque produits mais comment puis-je faire un bouton qui lorsque l'on clique nous affiche une petit phrase avec le prix total?

Regarde du côté de l'attribut onclick

Bonjour, j'ai bien copié le code et j'ai essayé de rajouter une ligne pour les viandes cependant lorsque je clique cela n'affiche rien
De plus je ne comprends pas pourquoi parfois il y a marqué "légume" et parfois "Leg" et pourquoi parfois fruit a une majuscule et parfois un S

 <label for="pet-select">Choississez un légume</label>

      <select name="legumes" id="legume-select">
          <option value="">--Choisissez--</option>
          <option value="carrote">Carotte</option>
          <option value="tomate">Tomate</option>
          <option value="salade">Salade</option>
          <option value="concombre">Concombre</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez un fruit</label>

      <select name="fruits" id="fruit-select">
          <option value="">--Choisissez--</option>
          <option value="pomme">Pomme</option>
          <option value="kiwi">Kiwi</option>
          <option value="poire">Poires</option>
          <option value="banane">Bananes</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez une viande</label>

      <select name="viandes" id="viande-select">
          <option value="">--Choisissez--</option>
          <option value="dinde">Dinde</option>
          <option value="poulet">Poulet</option>
          <option value="boeuf">Boeuf</option>
      </select>

         
      <input type="button" value="Prix du panier" id="btn-valider">
      
      <input type="text" id="resultat" value=""/>
      
      <script>
      
        // Prix en fonction des produits
        const legumes ={"carrote":0.90,"tomate":5.50,"salade":2.20,"concombre":1, "pomme":1.20,"kiwi":2.36, "poires":1.95, "banane": 1.10, "dinde":10.25 , "poulet":5.60, "boeuf": 5.89};
        const fruits ={"pomme":0.90,"kiwi":5.50,"poire":2.20,"banane":1};
        const viandes ={"dinde":0.90,"poulet":5.50,"boeuf":2.20,};
        
        // Listes de choix :
        const selLeg = document.querySelector("#legume-select");
        const selFruit = document.querySelector("#fruit-select");
        const selViandes = document.querySelector("#fruit-select");
        
        // bouton pour valider
        var btnValider = document.querySelector("#btn-valider");
        
        // Input pour afficher le résultat
        var inputResultat = document.querySelector("#resultat");
        
        //On attache l'event CLICK sur le bouton
         btnValider.addEventListener("click", calculerPanier, false);
         
        
         //Fonction pour faire le calcul
         function calculerPanier(){
            var leg = prixSelect(selLeg);
            var fruit = prixSelect(selFruit);
            var viandes = prixSelect(selviandes);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viandes;
           inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel){
          var choix = elmSel.value;
          console.log(choix,prix);
          return prix;
        }
      </script>

Déjà.. je vois une première erreur ici :

 const selViandes = document.querySelector("#fruit-select");

Je ne pense pas que la liste contenant les choix de viande ait pour ID "fruit-select"

ensuite.. tu as une autre erreur sur le nom de la variables viandes... (tu as utilisé deux fois la même variable.... ce n'est pas possible.. )
et donc, pour répondre à ta question

je ne comprends pas pourquoi parfois il y a marqué "légume" et parfois "Leg" et pourquoi parfois fruit a une majuscule et parfois un S

... pour avoir des noms de variables différents....
J'aurais pu utiliser toto, titi, tata ... mais bon.. j'ai cherché à avoir des noms de variables qui se rapprochent à ce qu'elle représentes....

Leg .. pour légumes

selMachin ... sel pour SELECT ( l'élément html qui contient tes listes )

Avec ou sans S .. juste pour les différencier... différencier les objets qui contiennent les prix .. de la variable qui contient LE prix correspondant au produit sélectionné dans les listes;.

J'ai essayé de modifier le code pour que tout corresponde mais cela ne fonctionne toujours pas

 <label for="pet-select">Choississez un légume</label>

      <select name="legumes" id="legume-select">
          <option value="">--Choisissez--</option>
          <option value="carrote">Carotte</option>
          <option value="tomate">Tomate</option>
          <option value="salade">Salade</option>
          <option value="concombre">Concombre</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez un fruit</label>

      <select name="fruits" id="fruit-select">
          <option value="">--Choisissez--</option>
          <option value="pomme">Pomme</option>
          <option value="kiwi">Kiwi</option>
          <option value="poire">Poires</option>
          <option value="banane">Bananes</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez une viande</label>

      <select name="viandes" id="viande-select">
          <option value="">--Choisissez--</option>
          <option value="dinde">Dinde</option>
          <option value="poulet">Poulet</option>
          <option value="boeuf">Boeuf</option>
      </select>

         
      <input type="button" value="Prix du panier" id="btn-valider">
      
      <input type="text" id="resultat" value=""/>
      
      <script>
      
        // Prix en fonction des produits
        const legumes ={"carrote":0.90,"tomate":5.50,"salade":2.20,"concombre":1, "pomme":1.20,"kiwi":2.36, "poires":1.95, "banane": 1.10, "dinde":10.25 , "poulet":5.60, "boeuf": 5.89};
        const fruits ={"pomme":0.90,"kiwi":5.50,"poire":2.20,"banane":1};
        const viandes ={"dinde":0.90,"poulet":5.50,"boeuf":2.20,};
        
        // Listes de choix :
        const selLeg = document.querySelector("#legume-select");
        const selFruit = document.querySelector("#fruit-select");
        const selViande = document.querySelector("#viande-select");
        
        // bouton pour valider
        var btnValider = document.querySelector("#btn-valider");
        
        // Input pour afficher le résultat
        var inputResultat = document.querySelector("#resultat");
        
        //On attache l'event CLICK sur le bouton
         btnValider.addEventListener("click", calculerPanier, false);
         
        
         //Fonction pour faire le calcul
         function calculerPanier(){
            var leg = prixSelect(selLeg);
            var fruit = prixSelect(selFruit);
            var viande = prixSelect(selViande);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viande;
           inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel){
          var choix = elmSel.value;
          console.log(choix,prix);
          return prix;
        }
      </script>

  </body>

La variable prix a disparu de la fonction prixSelect

Il faut modifier la fonction comme ceci

        function prixSelect(elmSel){
          var choix = elmSel.value;
          // A corriger
          console.log(choix,prix);
          return prix;
        }

Edit: correction..

Cela me renvoi bien un prix mais pas le bon
J'ai deux questions:
1- Pourquoi dans la fonction prixSelect, ne met on que " var prix = legumes [choix] et pas deux autres lignes avec fruit et viande?

2- Comment pourrais-je faire pour insérer le prix dans une phrase, pour que quand on clique il y ai écrit "le prix total de votre panier est de" et que le prix s'affiche dans la phrase?

Merci beaucoup pour toutes vos réponses, cela m'aide beaucoup

Comme ceci?

function prixSelect(elmSel){
          var choix = elmSel.value;
          var prix = elmSel [choix];
          console.log(choix,prix);
          return prix;
        }

Désolé, j'avais oublié de prendre en compte les trois "types" de produit

Essaye avec ça

         //Fonction pour faire le calcul
         function calculerPanier(){
            var leg = prixSelect(selLeg,legumes);
            var fruit = prixSelect(selFruit,fruits);
            var viande = prixSelect(selViande,viandes);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viande;
            inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel,produits){
          var choix = elmSel.value;
          var prix = produits[choix];
          console.log(choix,prix);
          return prix;
        }

Pour votre première réponse je ne comprends pas ou je dois placer la deuxième ligne

document.getElementById('id_du_span').innerHTML = prix;

Dans le code JavaScript là où actuellement on remplit l'input résultat

Excusez moi de revenir vous déranger mais j'ai une autre question:
Serait-il possible que quand je clique pour dérouler les différents choix de légume ou de fruits par exemple, que deux colonnes 's'affichent, une avec le nom du produit et une avec le prix?
Merci par avance

Pourquoi deux colonnes ?
Il suffit de faire

 <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="carrote">Carotte  1euros</option>
            <option value="tomate">Tomate  2.5 euros</option>
            <option value="salade">Salade  1.80 euros</option>
            <option value="concombre">Concombre 1.20 euros</option>
        </select>

Je voulais créer deux colonnes pour que les prix soit alignés et que ce soit plus propre

https://www.google.com/search?q=html+select+2+columns

Merci beaucoup pour votre réponse

J'ai une toute dernière question, y aurait-il un moyen que le prix s'actualise tout seul dès qu'on choisi un produit sans qu'on ai besoin de cliquer?

Oui.
Il faut appeler la fonction sur l'EVENT CHANGE sur chaque liste déroulante
https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event