更新总价不适用于输入按钮

Question

所以我制作了这个简单的复选框和小费应用程序。

现在，如果我点击一个框，它会更新价格和小费，但是，它不会更新订单总额

这是我的代码：

function updatePrice() {
  //Adding Food
  let items = 0;

  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      items += +checkBox.value;
    }
  });

  //Adding Tip

  let tip = document.getElementById("tip");

  tip = 0;

  document.addEventListener("click", (event) => {
    if (event.target.matches("input[type=button]")) {
      tip = event.target.value;
      document.getElementById("tip").textContent = `Tip: $${tip}`;
    }
  });

  //Calculating Totals

  let orderTotal = items + tip;

  document.getElementById("price").textContent = `Food Total: $${(
    items / 100
  ).toFixed(2)}`;

  document.getElementById("total").textContent = `Your order total is: $${(
    orderTotal / 100
  ).toFixed(2)}`;
}

<div class="menu-items">
    <h2>Order Details</h2>
        <div>
    <input type="checkbox" name="item1" value="1000" onClick="updatePrice()">
    <label for="item1">12 piece wings </label>
</div>
<div>
    <input type="checkbox" name="item2" value="700" onClick="updatePrice()">
    <label for="item2">6 piece wings </label>
</div>
<div>
    <input type="checkbox" name="item3" value="300" onClick="updatePrice()">
    <label for="item3">Large fries </label>
</div>
</div>
<div class="payment">
    <h2>Payment Summary</h2>
    <p id="price">Food Total: [=11=].00</p>
    <p id="fee">Delivery Fee [=11=].00</p>
    <p id="tip">Tip: [=11=].00</p>
    <input type="button" value="3">
    <input type="button" value="5">
    <input type="button" value="10">
    <p id="total">Your order total is: [=11=].00</p>
</div>

看起来小费没有移过函数，所以当我创建变量 orderTotal 时，小费值没有被添加

Answer 1

it doesn't update the order total

因为没有代码可以做到这一点。这是当您单击“提示”按钮时代码执行的操作：

tip = event.target.value;
document.getElementById("tip").textContent = `Tip: $${tip}`;

如您所见，此操作不会影响 orderTotal 或该总数的显示。您也可以通过编写代码来更新它们：

// update tip
tip = event.target.value;
document.getElementById("tip").textContent = `Tip: $${tip}`;

// update total
// with calculations because your other values are multiplied by 100 for some reason
document.getElementById("total").textContent = `Your order total is: $${(
  (orderTotal + (tip * 100)) / 100
).toFixed(2)}`;

一些补充说明...

您的 updateTotal 函数是 re-binding 每次执行时带有 document.addEventListener 的点击处理程序。这可能不是您想要的，并且可能导致错误。将事件处理程序与这些处理程序执行的逻辑分开绑定。
所使用的值几乎肯定会在某些时候引起混淆。选择一个标准并坚持下去。价值是“美元”还是“美分”？如果你坚持一个标准，那么你就不必为了让它工作而不断地用 * 100 和 / 100 操作来乱写代码。
对于某些元素，您具有内联 onClick 属性，对于其他元素，您使用 document.addEventListener。为什么要使它们不同？选择一个（最好是后者）并与之保持一致，否则你很可能会混淆自己。

Answer 2

请阅读更多关于让
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let
您在函数内部定义了一个范围变量，当您单击按钮时它不起作用，因为没有任何事件可以调用该函数。
之后，当你想以不同的方式调用函数时，你可以在函数之外定义一个对象来存储你的数据。

let data = {
  items: 0,
  tip: 0
};

const buttons = document.querySelectorAll("input[type=button]");

buttons.forEach((b) => {
  b.addEventListener("click", (event) => {
    if (event.target.matches("input[type=button]")) {
      data.tip = parseInt(event.target.value);
      document.getElementById("tip").textContent = `Tip: $${data.tip}`;
      showPrice();
    }
  });
});

function updatePrice() {
  data.items = 0;
  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      data.items += +checkBox.value;
      showPrice();
    }
  });
}
function showPrice() {
  //Calculating Totals

  let orderTotal = data.items + data.tip;

  document.getElementById("price").textContent = `Food Total: $${(
    data.items / 100
  ).toFixed(2)}`;

  document.getElementById("total").textContent = `Your order total is: $${(
    orderTotal / 100
  ).toFixed(2)}`;
}

Answer 3

HTML - 使用单选按钮代替输入类型按钮。
Javascript - 使用与单选按钮逻辑复选框相同的方法。

function updatePrice() {
  //Adding Food
  let items = 0;

  document.querySelectorAll("input[type=checkbox]").forEach((checkBox) => {
    if (checkBox.checked) {
      items += +checkBox.value;
    }
  });
  
  

  //Adding Tip
  document.querySelectorAll("input[type=radio]").forEach((radioBox) => {
    if (radioBox.checked) {
      items += +radioBox.value;
    }
  });

  //Calculating Totals

  let orderTotal = items;

  document.getElementById("price").textContent = `Food Total: $${(
    items / 100
  ).toFixed(2)}`;

  document.getElementById("total").textContent = `Your order total is: $${(
    orderTotal / 100
  ).toFixed(2)}`;
}

<div class="menu-items">
    <h2>Order Details</h2>
        <div>
    <input type="checkbox" name="item1" value="1000" onChange="updatePrice()">
    <label for="item1">12 piece wings </label>
</div>
<div>
    <input type="checkbox" name="item2" value="700" onChange="updatePrice()">
    <label for="item2">6 piece wings </label>
</div>
<div>
    <input type="checkbox" name="item3" value="300" onChange="updatePrice()">
    <label for="item3">Large fries </label>
</div>
</div>
<div class="payment">
    <h2>Payment Summary</h2>
    <p id="price">Food Total: [=11=].00</p>
    <p id="fee">Delivery Fee [=11=].00</p>
    <p id="tip">Tip: [=11=].00</p>
    <input type="radio" name="tip" value="300" onChange="updatePrice()"> 3
    <input type="radio" name="tip" value="500" onChange="updatePrice()"> 5
    <input type="radio" name="tip" value="1000" onChange="updatePrice()"> 10
    <p id="total">Your order total is: [=11=].00</p>
</div>

更新总价不适用于输入按钮

Update Total Price Not Working with Input Buttons

javascript