如何创建一个函数来将分配给按钮的值相加？

Question

这里是新编码员。我正在创建一个披萨菜单应用程序，它将分配给顶部按钮的值相加，并将它们显示在列表底部的“总计”中。但我很难让代码显示添加配料时的成本。

以下是我尝试过的：

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>

Answer 1

雷雷

Answer 2

更好的方法可能是在按钮上创建 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);
});

PIZZA SUPREME
Select a crust and toppings to build your own pizza!
Crust

  white wheat
  multigrain
  Cauliflower
  Thin Crust
  Deep Dish


Total: