Page 1 sur 1

Répétition de fonction

Posté : 20 nov. 2020, 14:01
par Alex.Joy
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

Re: Répétition de fonction

Posté : 21 nov. 2020, 16:31
par webmaster
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

Re: Répétition de fonction

Posté : 23 nov. 2020, 10:31
par Alex.Joy
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;
}