Así que tengo esta aplicación que hice donde calcula el total de los elementos del menú e incluye una tarifa de entrega de $5. El problema es que la cuarta opción solo incluye la tarifa de $5 en total, pero las otras 3 opciones no incluyen la tarifa.
Aquí está mi codepen https://codepen.io/shodoro/pen/dydNopX
¿Por qué mi cuarta opción, el batido de $4, es la única casilla de verificación de entrada que agrega la tarifa de envío correctamente?
Las primeras 3 opciones no incluyen la tarifa de envío de $5 en el total y no sé cómo solucionarlo
Aquí está mi 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)}`; }Esencial Quiero que todas las opciones incluyan la tarifa de envío al hacer clic en ellas, pero también me aseguro de que la tarifa de envío se restablezca a 0 cada vez que desmarques todas las opciones.
Esto se debe a que está configurando la tarifa de deliveryFee en un bucle y, por lo tanto, si, por ejemplo, se marca el artículo de 12 piezas de alas, establece la tarifa de deliveryFee en 5 y luego pasará al siguiente artículo (alas de 6 piezas) y se establecerá deliveryFee a 0. Entonces, cuando llegue al cálculo del total, deliveryFee será 0 y no 5. Creo que tal vez quieras algo más como esto:
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}`; }