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


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
Auteur

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