New coder here. I'm creating a pizza menu application that adds up the values assigned to the top buttons and displays them in a "Total" at the bottom of the list. But I'm having trouble getting the code to show the cost when adding ingredients.
Here's what I tried:
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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Total:
A better approach might be to create. This way you can add the value of the
x-priceproperties on the buttons and put them insidex-priceproperty using a single event listener and event propagation. like this: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); });