输入复选框只更新一个值但其他输入不更新？

Question

所以我制作了这个应用程序，它可以计算菜单项总数并包括 5 美元的运费。问题是第4个选项总共只包含$5费用，而其他3个选项不包含费用

这是我的代码笔 https://codepen.io/shodoro/pen/dydNopX

为什么我的第 4 个选项，冰沙 $4 是唯一正确添加运费的输入复选框？

前3个选项一共不包含$5送货费，不知道怎么改

这是我的 JS

      function updatePrice() {
          let items = 0;
          let deliveryFee = document.getElementById('fee')
          let tax = document.getElementById('tax')    
          let tip = document.getElementById('tip')

          tax = .1
          tip = .2

          document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
              if (checkBox.checked) {
                  items += +checkBox.value
                  deliveryFee = 5
              } else {
                  deliveryFee = 0
              }
          })


          document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
          document.getElementById("tax").textContent = `Tax (10%): $${(items * tax).toFixed(2)}`;
          document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
          document.getElementById("total").textContent = `Your order total is: $${((items * tax)+(items * tip)+(items)+(deliveryFee)).toFixed(2)}`;
      }

基本我希望所有选项在单击它们时都包含运费，但还要确保在您取消选中所有选项时运费重置为 0。

Answer 1

那是因为你在循环中设置 deliveryFee 所以如果，例如，选中 12 piece wings item，那么它将 deliveryFee 设置为 5 然后它会循环到下一个项目（6 片翅膀），它会将 deliveryFee 设置为 0。所以当它计算总数时，它 deliveryFee 将是 0 而不是 5。我想也许你想要更像是这样的：

          function updatePrice() {
              console.log('updatePrice');
              let items = 0;
              let deliveryFee = 0;
              let tax = document.getElementById('tax')    
              let tip = document.getElementById('tip')

              tax = .1
              tip = .2
              console.log('before forEach loop', items, deliveryFee);
              document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
                  console.log(checkBox);
                  if (checkBox.checked) {
                      console.log('checked!')
                      items += +checkBox.value
                      if (deliveryFee == 0) {
                        console.log('First checked item, setting delivery fee to 5.')
                        deliveryFee = 5;
                      }
                  } else {
                    console.log('not checked!');
                  }
              })
              console.log('after forEach loop', items, deliveryFee);
            
              if (items >= 10) {
                deliveryFee = deliveryFee * 2;
              }

              let orderTotal = (items * tax)+(items * tip)+(items) + deliveryFee;

              document.getElementById("price").textContent = `Food Total: $${(items).toFixed(2)}`;
              document.getElementById("tax").textContent = `Tax (10%): $${(items * tax).toFixed(2)}`;
              document.getElementById("tip").textContent = `Tip (20%): $${(items * tip).toFixed(2)}`;
              document.getElementById("fee").textContent = `Delivery Fee: $${deliveryFee.toFixed(2)}`;
              document.getElementById("total").textContent = `Your order total is: $${orderTotal}`;
          }

输入复选框只更新一个值但其他输入不更新？

Input Checkbox Only Updates One Value But Other Inputs Don't Update?

html

javascript

checkbox

dom

input