Neuer Programmierer hier. Ich erstelle eine Pizza-Menü-App, die die den oberen Schaltflächen zugewiesenen Werte addiert und sie als „Summe“ am Ende der Liste anzeigt. Aber ich habe Probleme, den Code dazu zu bringen, die Kosten beim Hinzufügen von Zutaten anzuzeigen.
Das habe ich versucht:
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>
Total:
更好的方法可能是在按钮上创建 中。这样，您就可以使用单个事件侦听器和事件传播来添加
x-price属性并将它们放入x-price属性的值。像这样：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); });