Итак, у меня есть это приложение, которое я сделал, где оно подсчитывает общее количество пунктов меню и включает плату за доставку в размере 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
в цикле, и поэтому, если, например, отмечен элемент из 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, чтобы было легче следовать
Я думаю, вы все еще не совсем понимаете, что происходит, когда эта функция запускается. Вы можете использовать операторы console.info
, чтобы распечатать, что происходит, что поможет вам понять, в чем проблема. Я добавил несколько отчетов журнала консоли, а также реализовал ваш запрос о том, чтобы плата за доставку удваивалась, если стоимость предметов составляет 10 долларов США или выше.
вы просто устанавливаете
deliveryFee
на 0 или 5 для каждого из флажков, перезаписывая любое предыдущее значение.