輸入復選框只更新一個值，但其他輸入不更新？

所以我做了這個應用程式，它計算選單項總數并包括 5 美元的運費。問題是第4個選項總共只包括5美元的費用，但其他3個選項不包括費用

這是我的密碼筆 https://codepen.io/shodoro/pen/dydNopX

為什么我的第四個選項，冰沙 $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。

uj5u.com熱心網友回復：

那是因為您正在deliveryFee回圈設定，因此，例如，如果選中了 12 片翅膀專案，則它設定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}`;
          }

標籤：javascript html dom 输入 复选框

上一篇：在MacOS上編譯舊版本Wt時出現的問題

下一篇：Javascript-WebAudioAPI-范圍型別輸入在Firefox中不是動態的，但在Chrome中是動態的-添加了reprex