Lo que quiero que haga mi programa:
Estoy tratando de hacer un formulario de pedido en línea en script html/java. Dentro de mi elemento seleccionado, hay 3 opciones, cada una con un precio diferente. Estoy tratando de permitir que el usuario seleccione una de las opciones, elija la cantidad que desea y luego muestre el precio total.
Problema
El precio total no se mostrará.
lo que he probado
Creé en el script js interno y creé una función getChoice. Usando declaraciones if, verifico qué opción seleccionó el usuario y, dependiendo de cuál se seleccione, multiplico el precio del valor por la cantidad del artículo que desea e intento devolver este valor a "total".
<script> var choice = document.getElementById("burgerSize").value; var amount = document.getElementById("quantity").value; function(getTotalAmount){ if(choice === "4"){ document.getElementById("total").value= amount*4; } if(choice === "6"){ document.getElementById("total").value= amount*6; } if(choice === "10"){ document.getElementById("total").value= amount*10; } } </script>Mi código HTML:
Please select size: <select id="burgerSize" onchange="getTotalAmount()"> <option disabled="disabled" selected = "selected" Select option</option> <option value="4">Large </option> <option value="6">Extra-Large </option> <option value="10">Supersize </option> </select> <label for="quantity"> Quantity: </label> <input type="number" id="quantity" name="quantity" min=1><br> <label> Total cost: </label> <input type="text" id ="total"/><br> </form><br><br> <script>¡Cualquier sugerencia en la dirección correcta sería realmente apreciada! Gracias por adelantado
Puede hacer que esto funcione fácilmente haciendo algo como llamar a la función cuando el usuario da valores a los campos de entrada.
function totalCal(){ const choice = document.getElementById("burgerSize").value; const amount = document.getElementById("quantity").value; document.getElementById("total").value = amount * choice; } document.getElementById("burgerSize").oninput = ( function(event) { totalCal(); }); document.getElementById("quantity").oninput = ( function(event) { totalCal(); }); <form> <label for="burgerSize">Please select size:</label> <select id="burgerSize"> <option disabled="disabled" selected="selected">Select option</option> <option value="4">Large </option> <option value="6">Extra-Large </option> <option value="10">Supersize </option> </select> <label for="quantity"> Quantity: </label> <input type="number" id="quantity" name="quantity" min=1><br> <label> Total cost: </label> <input type="text" id="total" /><br> </form>Será mejor si agrega el signo mayor que (">") al final de la primera etiqueta de opción y también para obtener el valor total, puede multiplicar la cantidad y la elección de acuerdo con este programa.
¡Gracias y un saludo!