Así que hice esta aplicación básica de precio de casilla de verificación que actualiza el precio de los alimentos cada vez que hace clic en una opción de casilla de verificación https://codepen.io/shodoro/pen/GRQNXyq
Sin embargo, tuve que codificar los precios en JavaScript, pero quiero saber cómo puedo actualizar los precios según el valor en la etiqueta de entrada.
Entonces, para este ejemplo en index.html, el valor se establece en 10, por lo que en lugar de codificar el precio de 10 en JS, solo puedo agregar el atributo de valor en su lugar
<input type="checkbox" name="item1" id="item1" value="10" onClick="updatePrice()">Además, ¿cómo haría que mi código fuera escalable? porque en este momento escribí un montón de declaraciones if else if else manualmente, sin embargo, si tuviera que agregar 50 nuevos elementos de menú, entonces eso no sería factible para mi código JS.
function updatePrice() { let price = 0.00; if (document.getElementById("item1").checked == true) { price = 10; } if (document.getElementById("item2").checked == true && document.getElementById("item1").checked == true) { price = 17; } else if(document.getElementById("item2").checked == true) { price = 7 } if (document.getElementById("item3").checked == true && document.getElementById("item1").checked == true && document.getElementById("item2").checked == true) { price = 20; } else if (document.getElementById("item3").checked == true && document.getElementById("item1").checked == true) { price = 13 } else if (document.getElementById("item3").checked == true && document.getElementById("item2").checked == true) { price = 10 } else if (document.getElementById("item3").checked == true){ price = 3 } document.getElementById("price").innerText = "Your order total is: $" + price; }Por último, tengo la parte total básica para que funcione la comida, pero no sé cómo convertiría mi código JS para incluir también las tarifas de envío, los impuestos, el porcentaje de propina agregado al total final.
¿Algunas ideas?
Para leer los precios dinámicamente desde la propiedad de value de las casillas de verificación, no falta mucho. Todo lo que se necesita es leer la propiedad "valor" del elemento correspondiente. Si solo desea calcular los precios juntos, el siguiente código es todo lo que necesita.
Agregue una clase a sus elementos de casilla de verificación. En este caso, su item de clase:
<input type="checkbox" name="item1" id="item1" class="item" value="10" onClick="updatePrice()"> Luego, puede recorrer todas las casillas de verificación con el item de clase y calcular el precio dinámicamente:
function updatePrice() { let price = 0.00; const checkboxes = document.getElementsByClassName("item"); for(let i = 0; i < checkboxes.length; i++) { if(checkboxes[i].checked) price += Number(checkboxes[i].value); } document.getElementById("price").innerText = "Your order total is: $" + price; }usted puede hacer eso...
const myForm = document.forms['my-form']; myForm.reset(); myForm.oninput =_=> { let sum = 0; ['item1','item2','item3'].forEach( chkBxNm => { if (myForm[chkBxNm].checked) sum += +myForm[chkBxNm].value }) myForm.total.textContent = `Your order total is: $${sum}` } myForm.onsubmit = e => { e.preventDefault() // disable submit } label, output { display: block; } output { color : green; font-size : 1.4em; margin-top : 1.2em; } <form action="" name="my-form"> <label><input type="checkbox" name="item1" value="10"> 12 piece wings $10</label> <label><input type="checkbox" name="item2" value="7"> 6 piece wings $7</label> <label><input type="checkbox" name="item3" value="3"> Large fries $3</label> <output name="total">Your order total is: $0 </output> </form>o
const myForm = document.forms['my-form']; myForm.reset(); myForm.oninput =_=> { let sum = 0; myForm.querySelectorAll('input[type=checkbox]').forEach( chkBx => { if (chkBx.checked) sum += +chkBx.value }) myForm.total.textContent = `Your order total is: $${sum}` } myForm.onsubmit = e => { e.preventDefault() // disable submit } label, output { display: block; } output { color : green; font-size : 1.4em; margin-top : 1.2em; } <form action="" name="my-form"> <label><input type="checkbox" value="10"> 12 piece wings $10</label> <label><input type="checkbox" value="7"> 6 piece wings $7</label> <label><input type="checkbox" value="3"> Large fries $3</label> <output name="total">Your order total is: $0 </output> </form>aquí está la solución fácil para este código https://codepen.io/mallick-portfolio/pen/KKQNbZZ?editors=1010 puede agregar más casillas de verificación que calcularán automáticamente el precio.
js aquí
function updatePrice() { let price = 0.00; const checkboxes = document.getElementsByClassName("item"); for(let i = 0; i < checkboxes.length; i++) { if(checkboxes[i].checked) price += parseInt(checkboxes[i].value); } document.getElementById("price").innerText = "Your order total is: $" + price;} actualizar precio()