Forum : Condensation

Bonjour,

Je fais mes petits débuts en js et j'ai créé un code qui marche, mais je trouve qu'il y'a beaucoup de répétition et j'aimerais savoir si c'est possible de peut-être le condenser:
partie 1: (dans cette partie j'ai 3 fois le fonctionnement daugmenter une valuer ou de la faire descendre)

/*counterone*/ var counter1 = document.querySelectorAll("#counterone"); function btn1plusone(){ counter1[0].textContent = parseInt(counter1[0].textContent) + 1; calculatec1(); } function btn1minone() { if(parseInt(counter1[0].textContent) != 0) { counter1[0].textContent = parseInt(counter1[0].textContent) - 1; } calculatec1(); } /*countertwo*/ var counter2 = document.querySelectorAll("#countertwo"); function btn2plusone(){ counter2[0].textContent = parseInt(counter2[0].textContent) + 1; calculatec2(); } function btn2minone() { if(parseInt(counter2[0].textContent) != 0) { counter2[0].textContent = parseInt(counter2[0].textContent) - 1; } calculatec2(); } /*counterthree*/ var counter3 = document.querySelectorAll("#counterthree"); function btn3plusone(){ counter3[0].textContent = parseInt(counter3[0].textContent) + 1; calculatec3(); } function btn3minone() { if(parseInt(counter3[0].textContent) != 0) { counter3[0].textContent = parseInt(counter3[0].textContent) - 1; } calculatec3(); }

partie 2: (ici j'ai le calcul )

/* calculate */ function calculatec1() { var x = 140; var y = document.getElementById("counterone").innerHTML; var result = x*y; document.getElementById("adv").textContent=result; calculatetotal(); } function calculatec2() { var x = 250; var y = document.getElementById("countertwo").innerHTML; var result = x*y; document.getElementById("rec").textContent=result; calculatetotal(); } function calculatec3() { var x = 250; var y = document.getElementById("counterthree").innerHTML; var result = x*y; document.getElementById("ab").textContent=result; calculatetotal(); } function calculatetotal(){ var so = parseInt(document.getElementById("so").innerHTML); var adv = parseInt(document.getElementById("adv").innerHTML); var rec = parseInt(document.getElementById("rec").innerHTML); var advbeh = parseInt(document.getElementById("advbeh").innerHTML); var ab = parseInt(document.getElementById("ab").innerHTML); var rapp = parseInt(document.getElementById("rapp").innerHTML); var sum = so + adv + rec + advbeh + ab + rapp; document.getElementById("sum").textContent=sum; }

Vous pouvez trouver l'exemple ici decu:
https://codepen.io/anon/pen/pBWRJe

Merci d'avance! :)

2 réponses

Dehairka,

il y a 7 ans

Salut !
Je débute aussi en JavaScript donc mon code pourra surement être encore plus optimisé mais en Jquery j'aurais fait ça :

$('.plus').click(function() { //On récupère la valeure du span et on ajoute +1 à ce chiffre var counter = parseInt($(this).parent().find("span").text()) + 1; $(this).parent().find("span").text(counter); //On récupère la valeur du prix et on ajoute +250 à ce chiffre var priceID = $(this).parent().parent().find(".sum"); var price = parseInt(priceID.text()) + 250; priceID.text(price); }); $('.min').click(function() { //On récupère la valeur du span et on soustrait -1 à ce chiffre var counter = parseInt($(this).parent().find("span").text()) - 1; $(this).parent().find("span").text(counter); //On récupère la valeur du prix et on soustrait -250 à ce chiffre var priceID = $(this).parent().parent().find(".sum"); var price = parseInt(priceID.text()) - 250; priceID.text(price); });

Ca me parait plus court que le tiens. J'ai fait seulement la fonction pour ajouter +1 au compteur et +250 en même temps au prix. Si tu comptes l'utiliser, avec ça il est simple d'ajouter une ligne pour mettre à jour le total.
J'espère que ça t'aidera, si tu as des questions n'hésite pas à me demander.

Liens de codepen pour essayer : https://codepen.io/Chaest/pen/oOopLv?editors=1000

PS : Je pense qu'on pourrait encore plus l'optimiser en faisant un if()else qui vérifie l'id de celui qu'on a appuyé et en fonction de celui-ci ajoute 250 ou 140.

pege,

il y a 7 ans

oui j'avoue que c'est plus court et plus logique aussi a comprendre pour un externe :)
Merci