Exercices autour du Dom
2022
On désire proposer à un utilisateur la possibilité de commander des produits dans un catalogue. Pour cela, on va, d'une part, créer deux tableaux javascript : le premier sera le « catalogue » , et le second sera le « panier » des commandes.
Le catalogue et le panier contiendront tous deux des objets représentant les produits.
Le catalogue sera affiché par une liste HTML. Pour repérer à quel objet du tableau correspond une entrée de la liste, la valeur associée à chaque élément de liste sera sa position dans le tableau.
Quand on appuiera sur le bouton ajouter, le produit sera
ajouté au panier, et une représentation de celui-ci, sous forme de
tableau HTML, sera mise à jour en utilisant le DOM. Le prix total de la
commande sera lui aussi mis à jour et affiché dans la page.
| désignation | prix |
|---|
Total 0
Écrire le code HTML qui servira de base à cette page.
Comment va-t-on représenter nos produits en javascript, sachant qu'un produit a un prix (HT) et une désignation. Proposez un système pour ajouter le calcul du prix TTC (avec une TVA fixe de 20%).
On suppose qu'on initialise et remplit un tableau (au sens
javascript/Array) de produits, appelé "catalogue", dans l'en-tête de la
page. Écrivez le code de la fonction remplirCatalogue() qui
remplira la liste déroulante des produits à partir du contenu du tableau
catalogue. Sur chaque ligne de la liste devra apparaître la désignation
du produit.
On utilisera le DOM
Écrivez la fonction ajouter(), qui sera appelée quand on pressera le bouton "ajouter". Cette fonction aura les effets suivants :
On utilisera le DOM (sauf éventuellement pour le total)
Modifiez pour afficher pour chaque produit son prix TTC et son prix HT.
On veut que le total soit la dernière ligne du tableau. Modifiez votre code en conséquence (plusieurs solutions possibles).
On utilisera le DOM