Discussion :

[Sergio_zero]

Bonjour à tous et à toutes,
Toujours dans la réalisation de mon panier en js je voudrais savoir comment récupérer l'id du produit ou les quantités sont entrées dans l'input pour pouvoir ensuite récupérer le prix qui correspond.
Voici le code

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
81
82
83
<script>
function CalculPanier(NbrProduit) {
var nbr1 = NbrProduit;
var nbr2 = Number(2);
var total = (Number(nbr1) * Number(nbr2));
document.getElementById("totaldon").innerHTML = total;
}
function Produit(id, reference, designation, prix) {
        this.id= id;
     this.reference= reference;
        this.prix= prix;
        this.designation= designation;
        this.toString= function() {
                return this.reference + " " + designation + " "+ prix;
        }
  }
 
  var catalogue= new Array();
  catalogue.push(new Produit(1, "ref 1", "ordinateur", 800));
  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));
  var panier= new Array();
  
 
  function remplirCatalogue() {
        var cat= document.getElementById('cat');
        for (var i in catalogue) {
            var e= document.createElement("p");
            e.value=i;
      var txt= document.createTextNode(catalogue[i].id + " " + catalogue[i].reference + " " + catalogue[i].designation + " " + catalogue[i].prix);
      var txt2=document.createElement("input");
            e.appendChild(txt);
      e.appendChild(txt2);
            cat.appendChild(e);
        }
  }
 
function ajouterCase(parent, txt) {
  var e= document.createElement("td");
  e.appendChild(document.createTextNode(txt));
  parent.appendChild(e);
}
 
function calculerTotal() {
  var tot= 0;
  for (var produit in panier) {
        tot+= panier[produit].prix;
  }
  return tot;
}
function ajouter() {
        /*var cat= document.getElementById('cat');
        var sel= cat.options[cat.selectedIndex].value;*/
  var cat= document.getElementById('cat');
        var sel= inputProduit;
        var prod= catalogue[sel];
        panier.push(prod);
        var ligne= document.createElement("tr");
        ajouterCase(ligne,prod.reference);
  ajouterCase(ligne,prod.designation);
        ajouterCase(ligne,prod.prix);
        document.getElementById("pan").appendChild(ligne);
        document.getElementById("tot").innerHTML= calculerTotal();
}
remplirCatalogue();
const inputs = document.querySelectorAll(".ligne_article input");
inputs.forEach((NbrProduit) => {
  NbrProduit.addEventListener("change", (e) => {
    alert(NbrProduit.value);
    CalculPanier(NbrProduit.value);
  });
});
</script>
 
<div id="cat" class="ligne_article"></div>
    <div class="reduction_impot"><span id="totaldon"></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 de votre aide

[gabi7756]

Bonjour,
si je peux me permettre ta demande est assez flou,
Infiné il existe plusieurs solutions, mais la question c'est toi tu veux laquelle?
Récupérer le prix qui correspond directement lors de la saisie

Code :

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

document.querySelector('#machinTruc').addEventListener('keydown',function(){})

Après une confirmation sur un button pour faire les totaux s'il y a plusieurs produits ?

Dans tout les cas une idée serait de faire des id faciles à réutiliser , lorsque tu génères ton code html via ton js
Tu fais en sorte que les spécifité du produit ait pour id un truc comme ca : 1_caracteristique ou 1_produit, tu as l'idée :p
Et pour ton input quantité 1_qte.
Comme ca tu peux retrouver éventuellement les catégories de produits concerné.

Cdt,

[Sergio_zero]

Bonjour,
Merci gabi7756 de ton aide.
Pour affiner ma demande en faite je récupère des produits dans une bdd même si là j'en ai mit quatre pour l'exemple, il va y en avoir environs 200 mais ça c'est pas un problème.

L'input qui est sur la même ligne que l'id, la référence, la description et le prix des produits qui sont affichés sert à mettre la quantité de produit que l'utilisateur veut ajouter au panier.
Ce qu'il faudrait c'est que j'arrive à récupérer l'id du produit correspondant à l'input ou une valeur a été renseignée pour pouvoir récupérer le prix et faire les calcules et tous le reste (affichage dans le panier, enregistrement dans la bdd etc...).

Pour le moment dans mon script le tarif est à 2 pour faire des essaies car je ne sais pas comment faire pour récupérer le tarif qui correspond.

Je ne souhaite pas de bouton, je voudrais que le calcul se fasse dès que la valeur dans l'input change.

Je serais très bien le faire en php avec un bouton bien sur mais justement l'idée c'est de faire un truc diffèrent.

J’espère avoir été un peut plus précis dans ma demande.
Merci de ton aide.

[gabi7756]

Bonjour,
Merci pour ton retour
Pour ce qui est de récupéré la quantité saisie tu fait un truc comme ca :

Code :

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

1
2
3
4
5
6
7
8
input.addEventListener("input", updateValue);
 
function updateValue(e) {
  console.log(e.target.value); // value de l'input
qte=e.target.value
  console.log(e.target.id); // Id de l'input modifié
id=e.target.id
}

L'evenement input se déclenche dès que la valeur de l'input change.
Ainsi comme évoqué dans mon dernier post tu as un id à partir du quel tu pourras déterminé le produit concerné par un nommage spécifique.

Code :

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

1
2
3
4
5
id=id.substring(0,1); // La tu récupères l'id 
var prix_unite = document.querySelector('#'+id+'prix_produit').textContent // Ou value en fonction de ton choix
// Je te laisse le soins d'enlevé pottentiellement l'unité monétaire derrière ( euro , dollar etc)
prix_total=prix_unite *qte
document.querySelector('#'+id+'prix_total').textContent=prix_total

Donc le code complet un truc du genre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
input.addEventListener("input", updateValue);
 
function updateValue(e) {
  // console.log(e.target.value); // value de l'input
  // console.log(e.target.id); // Id de l'input modifié
qte=e.target.value  
id=e.target.id
id=id.substring(0,1); // La tu récupères l'id 
prix_unite = document.querySelector('#'+id+'prix_produit').textContent // Ou value en fonction de ton choix
// Je te laisse le soins d'enlevé pottentiellement l'unité monétaire derrière ( euro , dollar etc)
prix_total=prix_unite *qte
document.querySelector('#'+id+'prix_total').textContent=prix_total
}

Oublié de dire mais prévois un input number ca sera plus simple et ca évitera de tapé des lettres

Pour l'histoire du reste et enregistrement sur la bdd, on va pas le faire à chaque fois , laisse toi un bouton de validation pour confirmé les quantités saisies ou ton panier

[Sergio_zero]

Bonjour gabi7756 et merci de tout aide,
Je dois t'avouais que je n'y comprend pas grand chose.
Je vais m'acheter un livre sur le js histoire de me dégrossir un peu, si tu en connais un bien n'hésite pas à me donner le titre.
Pour mon projet je l'ai fait en php mais j'aimerais bien pouvoir le faire en js pour ma culture personnel et par ce que j'aime bien le js, je trouve que ça dynamise bien un site.

Pour le type de l'input, oui je vais mettre number mais pour l'instant je m'étais concentré sur le fonctionnement de base.
Je vais mettre mon code avec des commentaires fonction par fonction pour voir si j'ai bien compris et si ça te dérange pas de me donner des petites explication j'en serai ravi.

[domi65]

bonjour;
Il y a des tas de ressources en ligne concernant JS.
je peux te recommander entres autres les cours de Pierre Giraud (qui sont également disponibles dans des versions PDF.
Cordialement;