Флажок ввода обновляет только одно значение, но другие вводы не обновляются?

Итак, у меня есть это приложение, которое я сделал, где оно подсчитывает общее количество пунктов меню и включает плату за доставку в размере 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 всякий раз, когда вы снимаете все параметры.

вы просто устанавливаете deliveryFee на 0 или 5 для каждого из флажков, перезаписывая любое предыдущее значение.

Robin Zigmond 15.05.2022 23:13
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что вы устанавливаете deliveryFee в цикле, и поэтому, если, например, отмечен элемент из 12 частей крыльев, он устанавливает deliveryFee в 5, а затем переходит к следующему элементу (крылья из 6 частей) и устанавливает deliveryFee на 0. Итак, когда дело дойдет до расчета суммы, deliveryFee будет 0, а не 5. Я думаю, может быть, вы хотите что-то еще вроде этого:

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

              tax = .1
              tip = .2
              console.info('before forEach loop', items, deliveryFee);
              document.querySelectorAll('input[type=checkbox]').forEach(checkBox => {
                  console.info(checkBox);
                  if (checkBox.checked) {
                      console.info('checked!')
                      items += +checkBox.value
                      if (deliveryFee == 0) {
                        console.info('First checked item, setting delivery fee to 5.')
                        deliveryFee = 5;
                      }
                  } else {
                    console.info('not checked!');
                  }
              })
              console.info('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}`;
          }

Ах я вижу. Знаете ли вы, как я могу изменить стоимость доставки в зависимости от общей стоимости всех товаров? Например, я пытался сделать deliveryFee = checkBox.value * 2, однако, если я выберу пункт меню по цене 4 доллара, комиссия составит 8 долларов, но затем, когда я нажму на другой элемент по цене 3 доллара, комиссия будет преобразована обратно в 6 долларов, а не просто 4 + 3 доллара = 7 долларов. * 2 = 14 долларов. В идеале я хотел бы просто использовать проценты, но я просто сделал x2, чтобы было легче следовать

makerbaker 16.05.2022 13:44

Я думаю, вы все еще не совсем понимаете, что происходит, когда эта функция запускается. Вы можете использовать операторы console.info, чтобы распечатать, что происходит, что поможет вам понять, в чем проблема. Я добавил несколько отчетов журнала консоли, а также реализовал ваш запрос о том, чтобы плата за доставку удваивалась, если стоимость предметов составляет 10 долларов США или выше.

Peter Haight 16.05.2022 22:41

Другие вопросы по теме