Répétition de fonction

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Alex.Joy
Messages : 2
Enregistré le : 20 nov. 2020, 13:58

Répétition de fonction

Message par Alex.Joy » 20 nov. 2020, 14:01

Bonjour,

Je débute en JavaScript et j ai réalisé un bon de commande qui lorsque l'on rentre une quantité m'affiche le prix total en fonction du prix unitaire.

J'ai créé une fonction calculPrice pour chaque ligne de produits (12 produits), je souhaiterais en faire qu'une seule et je n'arrive pas à trouver la solution.

https://codepen.io/alexjoyeau/pen/qBNGZOg

Je suis dessus depuis 2 jours et un peu d aides ne serait pas de refus.

Merci d avance

Avatar du membre
webmaster
Administrateur du site
Messages : 563
Enregistré le : 28 févr. 2017, 15:19

Re: Répétition de fonction

Message par webmaster » 21 nov. 2020, 16:31

Bonjour,

Effectivement, il faut réussir à ne pas réécrire la même fonction plusieurs fois.
La création de l'événement par addEventListener envoie un event en paramètre de la fonction

Dans event.target, on a l'objet qui a été cliqué. On peut donc trouver sa valeur, son nom et y faire les traitements sans coder en dur les noms des éléments HTML.

Voir la doc ici pour un exemple
https://www.toutjavascript.com/referenc ... stener.php
TJS : 25 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Alex.Joy
Messages : 2
Enregistré le : 20 nov. 2020, 13:58

Re: Répétition de fonction

Message par Alex.Joy » 23 nov. 2020, 10:31

Super merci beaucoup j'ai corrigé c'est parfait merci de votre aide

Code : Tout sélectionner

let ipts = document.querySelectorAll('input.produit-quantity')
 
for(let i=0, maxi = ipts.length; i < maxi ; i++) {
    ipts[i].addEventListener('change', calculPrice);
}

    function calculPrice(event) {
      console.log(event);
       let priceHorsTaxe = parseFloat(event.target.parentElement.querySelector('.produit_price_unitaire_ht').innerHTML);
        let quantity = parseFloat(event.target.value);
        let quantityCheck;
        if (isNaN(quantity)) {
            quantityCheck = 0;
        }
        else {
            quantityCheck = quantity;
        }
        let priceTotalHt = event.target.parentElement.querySelector('.produit_price_total_ht');
        priceTotalHt.textContent = priceHorsTaxe * quantityCheck;
}

Répondre