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

So I have this app I made where it calculates the menu items total and includes a $5 delivery fee. The problem is the 4th option only includes the $5 fee in the total, but the other 3 options don't include the fee

Here's my codepen https://codepen.io/shodoro/pen/dydNopX

Why is my 4th option, the smoothie $4 the only input checkbox that adds the delivery fee correctly?

The first 3 options don't include the $5 delivery fee in the total and I don't know how to fix it

Here's my 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)}`;
      }

Essential I want all options to include the delivery fee when clicking them, but also making sure the delivery fee resets to 0 whenever you uncheck all options.

CodePudding user response：

That's because you are setting deliveryFee in a loop and so if, for example, the 12 piece wings item is checked, then it sets deliveryFee to 5 and then it's going to loop through to the next item (6 piece wings) and it will set deliveryFee to 0. So when it gets to the calculation for the total, it deliveryFee will be 0 and not 5. I think maybe you want something more like this:

          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}`;
          }