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> |
Partager