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! :)
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.
oui j'avoue que c'est plus court et plus logique aussi a comprendre pour un externe :)
Merci