Este código debería permitir a los usuarios elegir el tamaño y la cantidad de banners y el código calculará automáticamente el precio que tienen que pagar. Lo intenté de muchas maneras pero falló. A continuación se muestra el código que había hecho
function calculateAmount() { var selFrst = parseInt(document.getElementById("size").value); var selScnd = parseInt(document.getElementById("quantity").value); var tot_price; if (selFrst == 120) { tot_price = selFrst * selScnd; } else if (selFrst == 80) { tot_price = selFrst * selScnd; } else if (selFrst == 64) { tot_price = selFrst * selScnd; } /*display the result*/ document.getElementById("tot_amount").value = tot_price; } <form id="banner" method="post" action=""> <table border="1" width="50%"> <col style="width:15%"> <col style="width:35%"> <!--form title--> <tr> <!--general--> <th colspan="2">General</th> </tr> <tr> <td>Size</td> <td> <select name="size" id="size" onchange="calculateAmount()"> <option value="0" disabled selected>--Choose Size--</option> <option value="120">4x15</option> <option value="80">4x10</option> <option value="64">4x8</option> </select> </td> </tr> <tr> <td>Quantity</td> <td> <input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()"> </td> </tr> <tr> <td>Order Total:RM</td> <td><input name="tot_amount" id="tot_amount" type="text" readonly></td> </tr> <!--end payment--> </table> </form>Ha utilizado id=cantidad, pero nombró cantidad como punto
<input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()">Puede ver id = "puntos" en la línea anterior, y en el javascript ha usado "cantidad"
var selScnd = parseInt(document.getElementById("quantity").value);Y no puedo adivinar para qué está escrito el if-else, cada condición está haciendo el mismo trabajo. Así que elimina el if-else. Pruebe el siguiente código.
function calculateAmount() { var selFrst = parseInt(document.getElementById("size").value); var selScnd = parseInt(document.getElementById("points").value); var tot_price = selFrst * selScnd; /*display the result*/ document.getElementById("tot_amount").value = tot_price; }La variable selScnd debe seleccionarse con el point de identificación, no con la quantity de ancho, ya que no existe una identificación como quantity . En otras palabras, hay un error tipográfico en su Código.
Tu código debería ser así:
function calculateAmount() { var selFrst = parseInt(document.getElementById("size").value); var selScnd = parseInt(document.getElementById("points").value); var tot_price; if (selFrst == 120) { tot_price = selFrst * selScnd; } else if (selFrst == 80) { tot_price = selFrst * selScnd; } else if (selFrst == 64) { tot_price = selFrst * selScnd; } /*display the result*/ document.getElementById("tot_amount").value = tot_price; } <form id="banner" method="post" action=""> <table border="1" width="50%"> <col style="width:15%"> <col style="width:35%"> <!--form title--> <tr> <!--general--> <th colspan="2">General</th> </tr> <tr> <td>Size</td> <td> <select name="size" id="size" onchange="calculateAmount()"> <option value="0" disabled selected>--Choose Size--</option> <option value="120">4x15</option> <option value="80">4x10</option> <option value="64">4x8</option> </select> </td> </tr> <tr> <td>Quantity</td> <td> <input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()"> </td> </tr> <tr> <td>Order Total:RM</td> <td><input name="tot_amount" id="tot_amount" type="text" readonly></td> </tr> <!--end payment--> </table> </form>La identificación del segundo div es incorrecta, además, debe calcular el precio solo cuando se eligen ambas entradas:
function calculateAmount() { var selFrst = parseInt(document.getElementById("size").value); var selScnd = parseInt(document.getElementById("points").value); var tot_price; if(selScnd && selFrst) { if (selFrst == 120) { tot_price = selFrst * selScnd; } else if (selFrst == 80) { tot_price = selFrst * selScnd; } else if (selFrst == 64) { tot_price = selFrst * selScnd; } document.getElementById("tot_amount").value = tot_price; } /*display the result*/ } <form id="banner" method="post" action=""> <table border="1" width="50%"> <col style="width:15%"> <col style="width:35%"> <!--form title--> <tr> <!--general--> <th colspan="2">General</th> </tr> <tr> <td>Size</td> <td> <select name="size" id="size" onchange="calculateAmount()"> <option value="0" disabled selected>--Choose Size--</option> <option value="120">4x15</option> <option value="80">4x10</option> <option value="64">4x8</option> </select> </td> </tr> <tr> <td>Quantity</td> <td> <input type="number" id="points" name="points" step="1" min="1" max="499" onchange="calculateAmount()"> </td> </tr> <tr> <td>Order Total:RM</td> <td><input name="tot_amount" id="tot_amount" type="text" readonly></td> </tr> <!--end payment--> </table> </form>