Nouveau codeur ici. Je crée une application de menu de pizza qui additionne les valeurs attribuées aux boutons du haut et les affiche dans un "total" en bas de la liste. Mais j'ai du mal à obtenir que le code indique le coût lors de l'ajout d'ingrédients.
Voici ce que j'ai essayé :
let whiteWheat = document.getElementById("white-wheat");
let multiGrain = document.getElementById("multi-grain");
let caulifl = document.getElementById("cauliflower");
let thinCrust = document.getElementById("thin-crust");
let deepDish = document.getElementById("deep-dish");
let totalField = document.getElementById("total");
totalField = 0;
whiteWheat.addEventListener(click, function() {
var totalCost = totalField + 10;
var finalOrder = document.createElement("li");
finalOrder.innerText = totalCost.value;
totalField.appendChild(finalOrder);
});
<h1>PIZZA SUPREME</h1> <h2>Select a crust and toppings to build your own pizza!</h2> <h3>Crust</h3> <h4> per crust.</h4> <ul><button id="white-wheat">white wheat</button></ul> <ul><button id="multi-grain">multigrain</button></ul> <ul><button id="cauliflower">Cauliflower</button></ul> <ul><button id="thin-crust">Thin Crust</button></ul> <ul><button id="deep-dish">Deep Dish</button></ul> <h2>Total:</h2> <div id="total"> </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Total:
Une meilleure approche pourrait consister à créer la valeur de l'attribut 中。这样，您就可以使用单个事件侦听器和事件传播来添加
x-price属性并将它们放入x-pricesur le bouton. Comme ça :let totalPrice = 0; const totalDiv = document.getElementById('total'); const itemsDiv = document.getElementById('items'); document.getElementById('buttons').addEventListener('click', e => { totalPrice += parseFloat(e.target.getAttribute('x-price')); totalDiv.textContent = totalPrice; const li = document.createElement('li'); li.textContent = e.target.textContent; itemsDiv.appendChild(li); });