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
Répétition de fonction
Re: Répétition de fonction
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
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
https://www.toutjavascript.com/livre/index.php
Re: Répétition de fonction
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;
}