Récupérer une valeur dans un array en fonction de la clé

**Sergio_zero** · 25/08/2024, 01h25

Bonjour à tous et à toutes,
J’essaie désespérément de récupérer le prix dans un array qui correspond à l'id du produit choisi mais je ne vois pas comment faire.
Si quelqu'un pouvais m'aider, ça serrait top.
C'est à la fonction CalculArticleque je bloque
Voici mon code qui affiche des produits et des input pour choisir le nombre de produit voulu.

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
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
<script>
var NumProd = "";
var catalogue= new Array(); // on créé un tableau catalogue
catalogue.push(new Produit(1, "ref 1", "ordinateur", 800));// je remplis le tableau catalogue avec push() qui ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.
catalogue.push(new Produit(2, "ref 2","souris", 20.45));
catalogue.push(new Produit(3, "ref 3","uniter centrale", 620));
catalogue.push(new Produit(4, "ref 4","ecran", 120));
 
function CalculArticle(NbrProduit, NumProd) {
var nbr1 = NbrProduit; //ici la variable nbr1 récupère le nombre de produit
   alert(NumProd);//la variable NumProd est le numéro du produit
  for (var tarifId in catalogue) {
            var Prix_article = Number(catalogue[tarifId].prix_produit);
        }
var total = (Number(nbr1) * Number(Prix_article)); //ici je calcule le nombre par le prix
document.getElementById("totalarticle").innerHTML = total; //ici j'affiche la valeure de la variable total dans le span qui a pour id totalarticle
}
function Produit(id, reference, designation, prix) {
        this.id_produit= id; // la je dit que id_produit à pour valeur id
     this.ref_produit= reference;
        this.prix_produit= prix;
        this.designation_produit= designation;
        this.ListeProduits= function() { //je coprend pas bien à quoi sert cette fonction, même si on l'enlève ça fonctionne
                return this.id + " " + reference + " " + designation + " "+ prix;
        }
  }
 
  var panier= new Array();// on créé un tableau panier
  
  function remplirCatalogue() {
        var cat= document.getElementById('cat'); //je récupère la balise div ou id=cat
        for (var i in catalogue) {
            var e= document.createElement("p");// crée un nouvel élément p
            e.value=i;//la variable e prend tour à tour les valeurs de i
      var txt= document.createTextNode(catalogue[i].id_produit + " " + catalogue[i].ref_produit + " " + catalogue[i].designation_produit + " " + catalogue[i].prix_produit);// on met le contenu dans la balise p
      var txt2=document.createElement("input");// crée un nouvel élément input
      txt2.setAttribute("type", "number");// on donne le type à l'input
      txt2.setAttribute("name", catalogue[i].id_produit+"_numproduit");//je donne le nom à chaque input
      txt2.setAttribute("placeholder", 0);
      txt2.setAttribute("id", catalogue[i].id_produit+"");
      cat.appendChild(e);//je place la balise div dans mon doc
            e.appendChild(txt);//je place les balises p dans mon div
      e.appendChild(txt2);//je place les balises input dans mon div
            
        }
  }
remplirCatalogue();
 
function recupInfos()
{
    if(this.id) {
      recupInfos.NumProd = this.id;
      return NumProd;
    } 
    return false;
}
 
var inputs= new Array();
for (var ListeId in catalogue) {
 inputs.push(document.getElementById(catalogue[ListeId].id_produit+""));//je liste l'id de chaque input
  document.getElementById(catalogue[ListeId].id_produit+"").addEventListener("change", (recupInfos));
        }
 
inputs.forEach((NbrProduit) => {
// const inputs = document.getElementById(catalogue[ListeId].id_produit+"_numproduit");
  NbrProduit.addEventListener("change", (e) => {
    alert(NbrProduit.value);
     alert(recupInfos.NumProd);
    CalculArticle(NbrProduit.value, recupInfos.NumProd);
  });
});
</script>
<div id="cat" class="ligne_article"></div>
    <div><span id="totalarticle"></span> € Total Panier</div>
 
<table id="pan">
  <tr><th>référence</th><th>designation</th><th>prix</th></tr>
</table>
 
<p>Total <span id="tot">0</span></p>

Merci d'avance

**NoSmoking** · 25/08/2024, 20h07

Bonjour,
la première chose à faire et d'indenter correctement ton code, tu t'y retrouvera plus facilement.

Pour pouvoir faire un calcul individuel il te faut avoir/créer des champs bien distincts afin de te permettre la récupération des valeurs.

Dans ta fonction remplirCatalogue() il te faut générer du code HTML qui pourrait ressembler à cela :

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
<div class="article">
  <p>
    <span>Article</span>
    <input type="hidden" value="ART_001" name="art[]">
    #001
  </p>
  <p>
    <span>Prix unitaire</span>
    <input type="hidden" name="prix[]" value="1.5">
    1.50 €
  </p>
  <p>
    <span>Nbr</span>
    <input type="number" name="quantite[]" value="0" min="0">
  </p>
  <p>
    <span>Total</span>
    <output class="total-ligne"></output> €
  </p>
</div>

j'ai volontairement exagéré le HTML avec des valeurs bidons.

Avec le code HTML ci-dessus tu peux récupérer et calculer facilement le montant pour chaque article.

La fonction de calcul individuelle est simple à comprendre/définir :

Code :

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

1
2
3
4
5
6
7
8
9
10
function calculArticle(input) {
  // get le parent et autres
  const parent = input.closest(".article");
  const elemPrix = parent.querySelector("[name='prix[]']");
  const elemTotal = parent.querySelector(".total-ligne");
  // le calcul
  const value = +input.value * +elemPrix.value;
  // l'affichage
  elemTotal.textContent = value.toFixed(2);
}

il faut bien sûr « accrocher » cette fonction au différent <input>.

Code :

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

1
2
3
4
5
6
const inputs = document.querySelectorAll("[name='quantite[]']");
inputs.forEach((input) => {
  input.addEventListener("input", (e) => {
    calculArticle(input);
  });
});

on utilise la surveillance de l'événement input qui permet de mettre à jour en temps réel la valeur du total.

Voilà déjà pour commencer car j'aurais d'autres remarques à faire

**Sergio_zero** · 27/08/2024, 20h19

Bonjour NoSmoking,
Merci de ton aide.
J'ai réussi à faire ce que je voulais d'une autre façon mais comme ton code ma l'air intéressant surtout pour la mise en forme avec css et que je fais ça pour apprendre j'ai essayer d'adapter avec ma liste d'article dynamique mais c'est un fiasco lol.
Première question :
Est ce qu'il faut que je génère le code html en php dynamique (je sais faire lol) ou est ce que je le fais en js ?
J'ai essayé en js, voici ce que j'ai fais mais ça fonctionne pas.

Je pense que sur le nommage des input que je me plante

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
function calculprix(input) {
  // get le parent et autres
  const parent = input.closest(".articletest");
  const elemPrix = parent.querySelector("[name='prix[]']");
  const elemTotal = parent.querySelector(".total-ligne");
  // le calcul
  const value = +input.value * +elemPrix.value;
  // l'affichage
  elemTotal.textContent = value.toFixed(2);
}
const recupinputs = document.querySelectorAll("[name='quantite[]']");
recupinputs.forEach((input) => {
  input.addEventListener("input", (e) => {
    calculprix(input);
  });
});
var catalogue= new Array(); // on créé un tableau catalogue
catalogue.push(new Produit(1, "ref 1", "ordinateur", 800));// je remplis le tableau catalogue avec push() qui ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.
catalogue.push(new Produit(2, "ref 2","souris", 20.45));
catalogue.push(new Produit(3, "ref 3","uniter centrale", 620));
catalogue.push(new Produit(4, "ref 4","ecran", 120));
catalogue.forEach(function (item, index, array) {
// console.log(item, index);
});
function Produit(id, reference, designation, prixArt) {
  	this.code= id; // la je dit que id_produit à pour valeur id
     this.ref_produit= reference;
  	this.prix= prixArt;
  	this.designation_produit= designation;
  }
var art= new Array();
var prix= new Array();
var quantite= new Array();
function remplirCatalogue() {
        var cat= document.getElementById('cat'); //je récupère la balise div ou id=cat
  	for (var i in catalogue) {
  	    var e= document.createElement("p");// crée un nouvel élément p
  	    e.value=i;//la variable e prend tour à tour les valeurs de i
       var txt=document.createElement("input"+"span");// crée un nouvel élément input
      txt.setAttribute("type", "hidden");// on donne le type à l'input
      txt.setAttribute("name", 'art[catalogue[i].code]');
      txt.setAttribute("value", catalogue[i].code);
      var txt= document.createTextNode(catalogue[i].ref_produit);
 
      var txt2=document.createElement("input"+"span");// crée un nouvel élément input
      txt2.setAttribute("type", "hidden");// on donne le type à l'input
      txt2.setAttribute("name", 'prix[catalogue[i].prix]');
      txt2.setAttribute("value", catalogue[i].prix+"");
      var txt2= document.createTextNode(catalogue[i].prix);
 
      var txt4=document.createElement("input");// crée un nouvel élément input
      txt4.setAttribute("type", "number");// on donne le type à l'input
      txt4.setAttribute("name", 'quantite[]');
      txt4.setAttribute("placeholder", 0);
      cat.appendChild(e);//je place la balise div dans mon doc
            e.appendChild(txt);//je place les balises p dans mon div
       e.appendChild(txt2);//je place les balises p dans mon div
      e.appendChild(txt4);//je place les balises input dans mon div
 
  	}
  }
 
remplirCatalogue();
 
<div id="cat"></div>
<div class="articletest">
  <span>Total</span>
    <output class="total-ligne"></output> €
</div>

**NoSmoking** · 28/08/2024, 20h39

Est ce qu'il faut que je génère le code html en php dynamique (je sais faire lol) ou est ce que je le fais en js ?

si tu extrais tes données d'une base de données, ce qui semble être le cas, alors oui il est tout à fait pertinent de réaliser le code HTML côté serveur plutôt que côté client.

Concernant ton code joint, je te propose une autre approche en JavaScript qui consiste à utiliser pour la construction du HTML des « littéraux de gabarits » utilisés via la méthode insertAdjacentHTML

Ressources :

Le résultat pourrait ressembler à pour la construction des tes objets :

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
function Produit(id, reference, designation, prix) {
  this.id_produit = "CA_" + id;
  this.ref_produit = reference;
  this.prix_produit = prix;
  this.designation_produit = designation;
  // la fonction qui va tout faire
  this.addRender = function(elemDest) {
    const html = `
      <div class="article">
        <h2 class="titre">${this.designation_produit}</h2>
        <p class="reference"><span>Réf. article</span>${this.ref_produit}</p>
        <p class="prix"><span>Prix unitaire</span><input type="hidden" name="prix[]" value="${this.prix_produit}">${this.prix_produit.toFixed(2)} €</p>
        <p class="nombre"><span>Nbr</span><input type="number" name="quantite[]" value="0" min="0"></p>
        <p class="total"><span>Total</span><output class="total-ligne"></output> €</p>
        <p><button type="button" class="btn-ajout">panier</button></p>
      </div>\n`; 
    elemDest.insertAdjacentHTML("beforeend", html);
    return this;
  }
}

... la fonction de construction devient des plus élémentaire, à savoir :

Code :

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

1
2
3
4
5
6
7
function afficheCatalogue(idElement) {
  const elemDestination = document.getElementById(idElement);
  catalogue.forEach((article) => {
    article.addRender(elemDestination);
  });
}
afficheCatalogue("catalogue");

... cela générera le HTML suivant, extrait :

Code html :

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

1
2
3
4
5
6
7
8
<div class="article">
  <h2 class="titre">ordinateur</h2>
  <p class="reference"><span>Réf. article</span>ref 1</p>
  <p class="prix"><span>Prix unitaire</span><input type="hidden" name="prix[]" value="800">800.00 €</p>
  <p class="nombre"><span>Nbr</span><input type="number" name="quantite[]" value="0" min="0"></p>
  <p class="total"><span>Total</span><output class="total-ligne"></output> €</p>
  <p><button type="button" class="btn-ajout">panier</button></p>
</div>

A ce stade je ne parle pas de la mise à jour des totaux volontairement, on verra cela plus tard.

Il faut être conscient que tu dois avoir deux conteneurs, un pour ta liste de produits et un pour ton panier.
Donc quelque chose comme :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<section class="wrapper">
  <div class="produit">
    <h2>Liste produits</h2>
    <div id="catalogue" class="articles"></div>
  </div>
  <div class="panier">
    <form id="form-panier">
      <h2>Panier <output id="total">---</output></h2>
      <div id="panier" class=""></div>
    </form>
  </div>
</section>

Voilà déjà pour un début d'analyse.

**Sergio_zero** · 30/08/2024, 10h57

Bonjour NoSmoking,
Très interagissant, je vais étudier ça ce week end
Merci

**Sergio_zero** · 04/09/2024, 13h49

Bonjour NoSmoking,
Merci pour ton aide
Je me suis penché sur ton code et voici comment je l'ai adapté pour continuer dans la réalisation de mon panier.
Tout fonctionne sauf si je modifie les quantités.
Il faudrait que je fasse un truc qui actualise ou peut être un truc qui supprime la ref et qui ajoute la nouvelle.
Allez je cherche lol

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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
 
<script>
function LignePanier (code, qte, prix)
{
    this.codeArticle = code;
    this.qteArticle = qte;
    this.prixArticle = prix;
    this.ajouterQte = function(qte)
    {
        this.qteArticle += qte;
    }
    this.getPrixLigne = function()
    {
        var resultat = this.prixArticle * this.qteArticle;
        return resultat;
    }
    this.getCode = function() 
    {
        return this.codeArticle;
    }
}
function Panier()
{
    this.liste = [];
    this.ajouterArticle = function(code, qte, prix)
    { 
        var index = this.getArticle(code);
        if (index == -1) this.liste.push(new LignePanier(code, qte, prix));
        else this.liste[index].ajouterQte(qte);
    }
    this.getPrixPanier = function()
    {
        var total = 0;
        for(var i = 0 ; i < this.liste.length ; i++)
            total += this.liste[i].getPrixLigne();
        return total;
    }
    this.getArticle = function(code)
    {
        for(var i = 0 ; i <this.liste.length ; i++)
            if (code == this.liste[i].getCode()) return i;
        return -1;
    }
    this.supprimerArticle = function(code)
    {
        var index = this.getArticle(code);
        if (index > -1) this.liste.splice(index, 1);
    }
}
var catalogue= new Array(); // on créé un tableau catalogue
catalogue.push(new Produit(1, "ref 1", "ordinateur", 800));// je remplis le tableau catalogue avec push() qui ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau.
catalogue.push(new Produit(25, "ref 2","souris", 20.45));
catalogue.push(new Produit(3, "ref 3","uniter centrale", 620));
catalogue.push(new Produit(4, "ref 4","ecran", 120));
catalogue.forEach(function (item, index, array) {
// console.log(item, index);
});
function Produit(id, reference, designation, prix) {
  this.id_produit = "CA_" + id;
  this.ref_produit = reference;
  this.prix_produit = prix;
  this.designation_produit = designation;
  // la fonction qui va tout faire
  this.addRender = function(elemDest) {
    const html = `
      <div class="article">
        <h2 class="titre">${this.designation_produit}</h2>
        <p class="reference"><span>Réf. article </span>${this.ref_produit}</p>
        <input type="hidden" value="${this.id_produit}" name="IDprod[]">
        <input type="hidden" value="${this.ref_produit}" name="art[]">
        <p class="prix"><span>Prix unitaire </span><input type="hidden" name="prix[]" value="${this.prix_produit}">${this.prix_produit.toFixed(2)} €</p>
        <p class="nombre"><span>Nbr</span><input type="number" name="quantite[]" id="nombre[]" placeholder="0" min="0"></p>
        <p class="total"><span>Total</span><output class="total-ligne"></output> €</p>
        <p><button type="button" class="btn-ajout">panier</button></p>
      </div>`; 
    elemDest.insertAdjacentHTML("beforeend", html);
    return this;
  }
}
 
function afficheCatalogue(idElement) {
  const elemDestination = document.getElementById(idElement);
  catalogue.forEach((article) => {
    article.addRender(elemDestination);
  });
}
afficheCatalogue("catalogue");
 
function calculArticle(input) {
  // get le parent et autres
  const parent = input.closest(".article");
   const elemIDprod = parent.querySelector("[name='IDprod[]']");
  const code = elemIDprod.value.substring(3);
  const elemprix = parent.querySelector("[name='prix[]']");
  const prix = elemprix.value;
 
 //alert(prix.value);
  const qte = input.value;
  const elemTotal = parent.querySelector(".total-ligne");
  // le calcul
  const valuePrix = +input.value * +elemprix.value;
  // l'affichage
  elemTotal.textContent = valuePrix.toFixed(2);
 
  ajouter(code,qte,prix)
}
 var nombre = document.getElementById('nombre[]');
    nombre.addEventListener('keypress', function (ContNBR){
        if (ContNBR.charCode < 48 || ContNBR.charCode > 57) {
            ContNBR.preventDefault();
        }
    });
 
const inputs = document.querySelectorAll("[name='quantite[]']");
inputs.forEach((input) => {
  input.addEventListener("input", (e) => {
    calculArticle(input);
  });
});
 
  function ajouter(code,qte,prix)
            {
             /* alert(code);
              alert(qte);
              alert(prix);*/
               /* var code = parseInt(document.getElementById("id").value);
                var qte = parseInt(document.getElementById("qte").value);
                var prix = parseInt(document.getElementById("prix").value);*/
                var monPanier = new Panier();
                monPanier.ajouterArticle(code, qte, prix);
                var tableau = document.getElementById("tableau");
                var longueurTab = parseInt(document.getElementById("nbreLignes").innerHTML);
                if (longueurTab > 0)
                {
                    for(var i = longueurTab ; i > 0  ; i--)
                    {
                        monPanier.ajouterArticle(parseInt(tableau.rows[i].cells[0].innerHTML), parseInt(tableau.rows[i].cells[1].innerHTML), parseInt(tableau.rows[i].cells[2].innerHTML));
                        tableau.deleteRow(i);
                    }
                }
                var longueur = monPanier.liste.length;
                for(var i = 0 ; i < longueur ; i++)
                {
                    var ligne = monPanier.liste[i];
                    var ligneTableau = tableau.insertRow(-1);
                    var colonne1 = ligneTableau.insertCell(0);
                    colonne1.innerHTML += ligne.getCode();
                    var colonne2 = ligneTableau.insertCell(1);
                    colonne2.innerHTML += ligne.qteArticle;
                    var colonne3 = ligneTableau.insertCell(2);
                    colonne3.innerHTML += ligne.prixArticle;
                    var colonne4 = ligneTableau.insertCell(3);
                    colonne4.innerHTML += ligne.getPrixLigne();
 
 
                }
                document.getElementById("prixTotal").innerHTML = monPanier.getPrixPanier();
                document.getElementById("nbreLignes").innerHTML = longueur;
            }
 
            function supprimer(code)
            {
                var monPanier = new Panier();
                var tableau = document.getElementById("tableau");
                var longueurTab = parseInt(document.getElementById("nbreLignes").innerHTML);
                if (longueurTab > 0)
                {
                    for(var i = longueurTab ; i > 0  ; i--)
                    {
                        monPanier.ajouterArticle(parseInt(tableau.rows[i].cells[0].innerHTML), parseInt(tableau.rows[i].cells[1].innerHTML), parseInt(tableau.rows[i].cells[2].innerHTML));
                        tableau.deleteRow(i);
                    }
                }
                monPanier.supprimerArticle(code);
                var longueur = monPanier.liste.length;
                for(var i = 0 ; i < longueur ; i++)
                {
                    var ligne = monPanier.liste[i];
                    var ligneTableau = tableau.insertRow(-1);
                    var colonne1 = ligneTableau.insertCell(0);
                    colonne1.innerHTML += ligne.getCode();
                    var colonne2 = ligneTableau.insertCell(1);
                    colonne2.innerHTML += ligne.qteArticle;
                    var colonne3 = ligneTableau.insertCell(2);
                    colonne3.innerHTML += ligne.prixArticle;
                    var colonne4 = ligneTableau.insertCell(3);
                    colonne4.innerHTML += ligne.getPrixLigne();
 
                }
                document.getElementById("prixTotal").innerHTML = monPanier.getPrixPanier();
                document.getElementById("nbreLignes").innerHTML = longueur;
            }
</script>
<section class="wrapper">
  <div class="produit">
    <h2>Liste produits</h2>
    <div id="catalogue" class="articles"></div>
  </div>
  <div class="panier">
    <form id="form-panier">
      <h2>Panier <output id="total">---</output></h2>
      <div id="panier" class=""></div>
    </form>
  </div>
</section>
 
 <section class="container">
            <article class="well form-inline pull-left col-lg-5">
                <legend>Contenu du panier</legend>
                <table id="tableau" class="table">
                    <thead>
                        <tr>
                            <th>Code</th>
                            <th>Qte</th>
                            <th>Prix unitaire</th>
                            <th>Prix de la ligne</th>
                            <th>Supprimer</th>
                        </tr>
                    </thead>
                </table>
                <br><label>Prix du panier total</label> : <label id = "prixTotal"></label>
                <label id = "nbreLignes" hidden>0</label>
            </article>
        </section>

**NoSmoking** · 05/09/2024, 11h21

et voici comment je l'ai adapté pour continuer dans la réalisation de mon panier.

ce n'est exactement à cela que je m'attendais

Mais pour commencer revenons sur certaines de tes erreurs.

Point 1
Les propriétés value des <input> sont de type string.
Avec les chaines de caractères l'opérateur (+) est un opérateur de concaténation.
Donc lorsque l'on écrit "1" + "1", il y a concaténation et non addition des deux termes, cela donnera "11".

Si tu veux faire une addition il te faut « caster » les value en nombre. Il existe moult façon de faire avec

parseInt(value, 10)
parseFloat(value)
Number(value)
+value ici (+) est le plus unaire
value *1 multiplication par 1

... et il est possible que j'en oubli.

Avec les <input type="number"> tu peux aussi utiliser la propriété valueAsNumber qui elle retourne un number.

Point 2
Dans ta méthode addRender on trouve cette ligne

Code html :

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

<p class="nombre"><span>Nbr</span><input type="number" name="quantite[]" id="nombre[]" placeholder="0" min="0"></p>

... ce qui fait que tu te retrouves avec plusieurs éléments ayant la même ID ce qui n'est pas correcte, une ID doit être UNIQUE.

Un appel avecdocument.getElementById("nombre[]") te renverra toujours le premier élément du document ayant "nombre[]" comme ID.

Voilà pour les « erreurs grossières et classiques ».

Pour l'approche, comme dit, je voyais plutôt deux conteneurs, un pour la liste des produits et un pour le panier.

Dans la liste des produits tu valides un ajout au panier et au clic sur le bouton tu transfères cet élément dans le panier.
Différentes méthodes peuvent être utilisée pour transférer un article dans le panier, clonage, copie, création dynamique.

Tu as bien un élément <div class="panier"> mais tu ne t'en sert pas !

J'ai mis un exemple en ligne d'une façon de faire, regarde les sources, perfectibles, et analyse.

Calcul automatique d'un panier

Tiens nous au courant

**NoSmoking** · 05/09/2024, 17h48

J'ai eu le temps de regarder plus avant ton code et tu n'en étais pas loin !

Donc correction dans ta méthode this.ajouterQte, suivant point 1 vu précédement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function LignePanier (code, qte, prix)
{
    this.codeArticle = code;
    this.qteArticle = qte;
    this.qteArticle = +qte;
    this.prixArticle = prix;
    this.ajouterQte = function(qte)
    {
/*-- OUT concatenation
        this.qteArticle += qte;
/*--*/
        this.qteArticle = +qte;
    }
// etc ...

Correction dans ta fonction calculArticle, c'est plus de la logique

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function calculArticle(input) {
  // get le parent et autres
  const parent = input.closest(".article");
/*-- OUT on utilise le code article
  const elemIDprod = parent.querySelector("[name='IDprod[]']");
  const code = elemIDprod.value.substring(3);
/*--*/  
  const elemIDprod = parent.querySelector("[name='art[]']");
  const code = elemIDprod.value;
  const elemprix = parent.querySelector("[name='prix[]']");
  const prix = elemprix.value;
// etc ...

Et enfin dans ta fonction ajouter, le principal étant de créer une instance « globale » de Panier et non de le redéclarer à chaque fois :

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
// on crée une seule instance de panier
const monPanier = new Panier();
 
function ajouter(code, qte, prix)
{
/*-- OUT déclarer une instance « globale »
    var monPanier = new Panier();
/*--*/    
    monPanier.ajouterArticle(code, qte, prix);
    var tableau = document.getElementById("tableau");
/*-- OUT il faut juste supprimer les lignes
    var longueurTab = parseInt(document.getElementById("nbreLignes").innerHTML);
    if (longueurTab > 0)
    {
        for (var i = longueurTab; i > 0; i--)
        {
            monPanier.ajouterArticle(parseInt(tableau.rows[i].cells[0].innerHTML), parseInt(tableau.rows[i].cells[1].innerHTML), parseInt(tableau.rows[i].cells[2].innerHTML));
            tableau.deleteRow(i);
        }
    }
/*--*/
    const nbrLignes = tableau.rows.length - 1;
    for (let i = nbrLignes; i > 0; i -= 1)
    {
        tableau.deleteRow(i);
    }
    var longueur = monPanier.liste.length;
    for (var i = 0; i < longueur; i++)
    {
        var ligne = monPanier.liste[i];
        var ligneTableau = tableau.insertRow(-1);
        var colonne1 = ligneTableau.insertCell(0);
        colonne1.innerHTML += ligne.getCode();
        var colonne2 = ligneTableau.insertCell(1);
        colonne2.innerHTML += ligne.qteArticle;
        var colonne3 = ligneTableau.insertCell(2);
        colonne3.innerHTML += ligne.prixArticle;
        var colonne4 = ligneTableau.insertCell(3);
        colonne4.innerHTML += ligne.getPrixLigne().toFixed(2);
    }
    document.getElementById("prixTotal").innerHTML = monPanier.getPrixPanier().toFixed(2);
/*-- OUT pas besoin
    document.getElementById("nbreLignes").innerHTML = longueur;
/*--*/    
}

Pas tout corrigé/optimisé mais voilà qui devrait t'aider à avancer

PS : Au passage les ID sur les <input type="number"> sont parfaitement inutiles.

**Sergio_zero** · 12/09/2024, 17h01

Merci NoSmoking pour toutes ces explications,
Il y a pas mal de chose que j'avais vu et corrigé comme les id des input qui ne sont pas uniques mais qui m'étaient utiles pour faire fonctionner une fonction pour empêcher de saisir autre chose que des chiffres.
Je pointe vers eux via la class maintenant donc les id ne me servent plus, je vais les supprimer.
J'avais compris que c'était des chaîne de caractère que je renvoyais et j'ai utilisé l'option : Number(value)
Pour le reste, je regarderais tranquillement car pour le moment je dois avancer sur le projet, donc j'ai continué en php pour ne pas perdre trop de temps mais je m'y replonge dès que possible.
Merci aussi pour ton exemple via le lien, je vais aller regarder le code dès que j'ai un moment.

Encore merci et je poste dès que j'ai bien avancé.
Bonne journée

Récupérer une valeur dans un array en fonction de la clé

JavaScript

Discussions similaires

Partager

Partager