Gérer un panier achat Javascript

**marp88** · 16/02/2014, 00h28

Salut,
Je suis à mon 3eme mois de développement JavaScript et j'aurais besoin d'aide.
Le prof nous a demandé d'essayer de réaliser un panier d'achat en javascript et pour l'instant j'ai bien réussi à le faire même si pour les PRO, ce code sera

nul, mais je débute....

- Je n'arrive pas à actualiser les "INPUT" quand je soustrais un article.
- Pourquoi les "INPUT" ne se vident-ils pas après avoir cliquer sur "Tout supprimer" ? EDIT : J'ai réussi à le résoudre celui-ci

- Pourquoi la class="learti" ne s'affiche qu'une fois alors que je l'appelle 3 fois ?
- Pourquoi quand j'ajoute un lapin et une marmite le total de TVAc prends plusieurs chiffres après la virgule ?
-Petit bug: 3 lapins - 4 lapins + 2 lapins = compteur d'articles juste mais montant TVAc et HTVA pas juste car pour 2 lapins les montant devraient être de §à;

J'ai mis en ligne mon code à cette adresse : http://creativ31.byethost33.com/js/MEGAMAGASIN.html

Je sais qu'un nouveau membre(1post) qui vient poster un lien c'est louche donc je mets mon code ci dessous:

D'avance merci.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8" />
    <title>Mon e-commerce en JS</title>
    <style>
section {
     margin: 0px auto;
     width: 500px;
}
 
body {
     background-color: #FFD119;
}
 
fieldset {
     border: 5px solid #14CCB7;
}
 
input[type="button"] {
     background: none repeat scroll 0px 0px #11CCAD;
}
 
input[value="Retirer 1 article"] {
     background: none repeat scroll 0px 0px #FF798D;
}
 
#Toutsupprimer {
     background: none repeat scroll 0px 0px #FF798D;
}
 
    </style>
    <script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
    //100*0.21= TVA
    //100/1,21= HTVA
 
       // -------------------------------------------------
       // Ajouter parenthese avec nombres de prod select
       // -------------------------------------------
 
 
       // -------------------------------------------------
       // variables
       // -------------------------------------------
       var comptageArt1=1;          //Compte le nombre de  marmites à pression.
       var comptageArt2=1;          //Compte le nombre de lapins électriques.
       var comptageArt3=1;          //Compte le nombre de scies sauteuses.
 
       var arti1=0;           //Additionne le total € d'articles HTVA >marmites à pression.
       var arti2=0;           //Additionne le total € d'articles HTVA >lapins électriques.
       var arti3=0;           //Additionne le total € d'articles HTVA > scies sauteuses.
 
       var objet=["marmites","lapins","scies"]; // Affiche le nom de l'article ajouté.
 
       var global1 =0;        // le total de tout les articles HTVA.
//////////////////////////////////////////////#########################################1//////////////////////////////////////
       // -------------------------------------------------
       // FONCTIONS
       // -------------------------------------------
       /////////////////////////////////////////ADDITION//////////////////////////
          function calcule(prix,arti){ 
            document.getElementById("htva").value=parseFloat(prix* arti).toFixed(2);
               document.getElementById("tva").value = parseFloat(prix*0.21 *arti).toFixed(2);
                document.getElementById("tvac").value = parseFloat(prix*1.21* arti).toFixed(2);
                };
//////////////////////////////////////////////#########################################1//////////////////////////////////////
 
/////////////////////////////////////////SOUSTRACTION//////////////////////////
          function soustraction(leId,moins1){
           document.getElementById(leId).value =moins1 ;
           if (comptageArt1<=0) {
            window.alert("dfre");
            window.comptageArt1=1
           };
                    if (comptageArt2<=0) {
            window.alert("dfre");
            window.comptageArt2=1
           };
                    if (comptageArt3<=0) {
            window.alert("dfre");
            window.comptageArt3=1
           };
          }
 //////////////////////////////////////////////#########################################//////////////////////////////////////
 
/////////////////////////////////////////EFFACER//////////////////////////
          function effacer(leId,leCompta,RemiseAZero){
            document.getElementById(leId).value =RemiseAZero ;
                window.comptageArt1 =leCompta;
                  window.comptageArt2 =leCompta;
                    window.comptageArt3 =leCompta;
                      window.arti1 =leCompta;
                         window.arti2 =leCompta;
                            window.arti3 =leCompta;                    
                              window.global1 =leCompta;
            };
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
       // -------------------------------------------------
       // MES ELEMENTS INTERACTIFS
       // -------------------------------------------------
/////////////////////////////////////////ADDITION article 1//////////////////////////
            window.onload=function(){
                document.querySelector("#art1A").onclick=function(){
                    calcule("210",comptageArt1) ;
                      comptageArt1++;
                         window.arti1 =210+window.arti1;
                            window.global1 = window.arti1+window.arti2+window.arti3;
                                document.querySelector("#toutArticles").value= (window.global1*1.21);
                                  document.querySelector("#toutArticlesHTVA").value= window.global1;
                                   document.querySelector("#nombreArt1").innerHTML= "("+(comptageArt1-1)+")";
                                    document.querySelector(".learti").innerHTML= "("+(window.objet[0])+")";
              };
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
/////////////////////////////////////////ADDITION article 2//////////////////////////
                document.querySelector("#art2A").onclick=function(){
                    calcule("25",comptageArt2);
                      comptageArt1+comptageArt2 ;
                        comptageArt2++;
                           window.arti2 =25+window.arti2;
                             window.global1 = window.arti1+window.arti2+window.arti3;
                               document.querySelector("#toutArticles").value= (window.global1*1.21);
                                document.querySelector("#toutArticlesHTVA").value= window.global1;
                                  document.querySelector("#nombreArt2").innerHTML= "("+(comptageArt2-1)+")";
                                    document.querySelector(".learti").innerHTML= "("+(window.objet[1])+")";
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
 
/////////////////////////////////////////ADDITION article 3/////////////////////////
                };          
                document.querySelector("#art3A").onclick=function(){
                    calcule("150",comptageArt3);
                      comptageArt1+comptageArt2+comptageArt3 ;
                        comptageArt3++;
                          window.arti3 =150+window.arti3;   
                            window.global1 = window.arti1+window.arti2+window.arti3;
                              document.querySelector("#toutArticles").value= (window.global1*1.21);
                                document.querySelector("#toutArticlesHTVA").value= window.global1;                              
                                  document.querySelector("#nombreArt3").innerHTML= "("+(comptageArt3-1)+")";
                                    document.querySelector(".learti").innerHTML= "("+(window.objet[2])+")";
 
 
                };
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
//////////////////////////////////////////////Soustraire les articles 1 par 1//////////////////////////////////////
                document.querySelector("#art1S").onclick=function(){
                    soustraction("nombreArt1",comptageArt1--)
                   document.querySelector("#nombreArt1").innerHTML= "("+(comptageArt1-1)+")";
                   window.arti1=arti1-210;
 
            };
                document.querySelector("#art2S").onclick=function(){
                    soustraction("nombreArt2",comptageArt2--)
                   document.querySelector("#nombreArt2").innerHTML= "("+(comptageArt2-1)+")";
                   window.arti2=arti2-25;
 
            };
                document.querySelector("#art3S").onclick=function(){
                    soustraction("nombreArt3",comptageArt3--)
                   document.querySelector("#nombreArt3").innerHTML= "("+(comptageArt3-1)+")";
                   window.arti3=arti3-150;                   
            };     
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
 
//////////////////////////////////////////////Supprimer les articles //////////////////////////////////////
               document.querySelector("#Toutsupprimer").onclick=function(){
                window.comptageArt1 =1;
                  window.comptageArt2 =1;
                    window.comptageArt3 =1;
                      window.arti1 =0;
                         window.arti2 =0;
                          window.arti3 =0;                  
                           window.global1 =0;
                           document.querySelectorAll("#toutArticlesHTVA","toutArticles","htva","tva","tvac").value= 0;
 
            };  
//////////////////////////////////////////////#########################################//////////////////////////////////////
 
};

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</script>
</head>
<body >
    <section>
<h1>Mon e-commerce en JS</h1>
  <form action="traitement.html" method="get">     
     <fieldset><legend>Mon panier</legend>      
       <p><input type="button" value="Ajouter 1 article" name="art1A" id="art1A" />
          <input type="button" value="Retirer 1 article" name="art1S" id="art1S" />
            <label for="art1A">Une marmite à pression(210 &euro;) <span id="nombreArt1"></span></label>
       </p>              
       <p><input type="button" value="Ajouter 1 article" name="art2A" id="art2A" />
           <input type="button" value="Retirer 1 article" name="art2S" id="art2S" />
           <label for="art2A">Un lapin électrique(25 &euro;) <span id="nombreArt2"></span></label> 
        </p>             
        <p><input type="button" value="Ajouter 1 article" name="art3A" id="art3A" />
            <input type="button" value="Retirer 1 article" name="art3S" id="art3S" />
            <label for="art3A">Une scie sauteuse(150 &euro;) <span id="nombreArt3"></span></label>
        </p>
 
 
        <p>TOTAL HTVA <span class="learti"></span>: 
          <input type="text" value="0" id="htva"  disabled="disabled" /> &euro;
        </p> 
        <p>TVA (21%) <span class="learti"></span>: 
          <input type="text" value="0" id="tva"  disabled="disabled" /> &euro;
        </p>               
        <p><strong>TOTAL TVAc <span class="learti"></span>: </strong>
          <input type="text" value="0" id="tvac" disabled="disabled" /> &euro;
        </p>
 
 
 
              <p><strong>TOTAL de tous les articles TVAc: </strong>
                 <input type="text" value="0" id="toutArticles" disabled="disabled" /> &euro;
                </p>
            <p><strong>TOTAL de tous les articles HTVA : </strong>
                  <input type="text" value="0" id="toutArticlesHTVA" disabled="disabled" /> &euro;
            </p>
            <p><input type="button" value="Valider le panier" name="validationPanier"/> <input type="button" value="Tout supprimer" name="Toutsupprimer" id="Toutsupprimer" /></p>
            </fieldset>
  </form>
<p>&copy;IEPS 2014 - Ver: 0.2 ;)</p>
</section>
 
</body>
</html>

**SylvainPV** · 17/02/2014, 11h38

- Je n'arrive pas à actualiser les "INPUT" quand je soustrais un article. --> pourtant tu y arrives bien pour les ajouter. Pourquoi le code devrait être différent ? C'est juste un moins au lieu d'un plus. Déclare et code des fonctions qui te simplifient la tâche, updateTotal() par exemple.

- Pourquoi quand j'ajoute un lapin et une marmite le total de TVAc prends plusieurs chiffres après la virgule ? --> c'est dû à la façon dont sont stockés les nombres flottants. Pose la question à ton prof, c'est une question intéressante qui peut bénéficier à toute la classe. La solution pour éviter ce souci est de fixer le nombre de décimales avec un number.toFixed(2)

Question organisation du code, je te suggère de simplifier la déclaration de tes variables comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var objets = [ { nom : "marmite", description: "Une marmite à pression", prix: 210, quantite: 0 },

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{ nom : "lapin", description: "Un lapin électrique", prix: 25, quantite: 0 }, { nom : "scie", description: "Une scie sauteuse", prix: 150, quantite: 0} ];

Avoir un modèle de données simple et organisé est la meilleure façon de produire un code efficace et fiable

edit : il y a un bug avec les balises code du forum, le code ci-dessus est bien en un seul morceau

**marp88** · 17/02/2014, 13h32

Merci pour ces bons conseils

**Ahmed braya** · 06/08/2014, 15h38

slt marp88 mon ami j'ai repris ton script c'est vraiment interessant mais apparemment vider le panier et supprimer panier ne marche pas puis-je avoir le script final

Gérer un panier achat Javascript

JavaScript

Discussions similaires

Partager

Partager