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>