Foros del Web » Programando para Internet » Javascript »

Multiplicar Cantidad * Precio = Total

Estas en el tema de Multiplicar Cantidad * Precio = Total en el foro de Javascript en Foros del Web. Hola amigos del foro, soy semi nuevo en javascript, en este código en producción dejo los enlaces. Me funcionan con 3 decimales hasta cierto punto, ...
  #1 (permalink)  
Antiguo 05/04/2021, 17:43
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 619
Antigüedad: 16 años, 4 meses
Puntos: 6
Mensaje Multiplicar Cantidad * Precio = Total

Hola amigos del foro, soy semi nuevo en javascript, en este código en producción dejo los enlaces.

Me funcionan con 3 decimales hasta cierto punto, ya va la explicación:

Código HTML:
Ver original
  1. ejemplo numero 1:
  2. Cantidad: 2
  3. Precio: 4.990
  4. total: 9.980
  5.  
  6. ||  Qty ||  Price(Per/Kg)   ||      Amount      ||
  7. ||  2   ||      4.990       ||      9.980       ||
  8.  
  9.  
  10.  
  11. En el ejemplo uno con 3 decimales me funciona todo bien
  12. pero necesito que funcione ambos es decir que reconozca
  13. si el precio es "4.990" se vean los 3 decimales en caso
  14. que el precio sea "4.990.100" me muestre los otros tres
  15. digitos pero si agrego al precio 3 digitos mas tengo el
  16. siguien error de NaN como el ejemplo numero 2
  17.  
  18.  
  19. ejemplo numero 2:
  20. Cantidad: 2
  21. Precio: 4.990
  22. total: 9.980
  23.  
  24. ||  Qty ||  Price(Per/Kg)   ||      Amount      ||
  25. ||  2   ||   4.990.100      ||       NaN        ||








lo bueno que en jsfiddle.net uno puede editar y darle RUN para ver como va en tiempo real.


ejemplo en producción:
ejemplo con 2 decimales: https://jsfiddle.net/9egno7ge/6/
ejemplo sin decimal: sin decimal

index.html
Código HTML:
Ver original
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  2.       <tbody>
  3.            <tr>
  4.  
  5.             <td>Item Name</td>
  6.             <td>Qty</td>
  7.             <td>Price(Per/Kg)</td>
  8.             <td>Amount</td>
  9.           </tr>
  10.  
  11.           <tr class="amount-row">
  12.     <td>Test Item 1</td>
  13.             <td><input class="quantity"  name="input" type="text" /></td>
  14.             <td><input class="price" name="input" type="text" /></td>
  15.             <td><input class="amount" name="input" type="text" /></td>
  16.           </tr>
  17.                     <tr class="amount-row">
  18.     <td>Test Item 2</td>
  19.             <td><input class="quantity"  name="input" type="text" /></td>
  20.             <td><input class="price" name="input" type="text" /></td>
  21.             <td><input class="amount" name="input" type="text" /></td>
  22.           </tr>
  23.       </tbody>
  24.     </table>
  25.     <p>&nbsp;</p>
  26.     <table width="300" border="0">
  27.       <tr>
  28.         <td width="100"><strong>Total Amount</strong></td>
  29.         <td id="total-amount">&nbsp;</td>
  30.       </tr>
  31.       <tr>
  32.         <td><strong>Discount</strong></td>
  33.         <td><input type="text" id="discount"></td>
  34.       </tr>
  35.       <tr>
  36.         <td><strong>Net Amount</strong></td>
  37.         <td id="net-amount">&nbsp;</td>
  38.       </tr>
  39.     </table>

Código Javascript:
Ver original
  1. var totalAmount = 0;
  2.     $('.quantity, .price').keyup(function() {
  3.       totalAmount = 0;
  4.       var netAmount = 0;
  5.       var discount = 0;
  6.  
  7.       $(".amount-row").each(function(index, row) {
  8.         var quantity = $(row).find('.quantity').val();
  9.         var price = $(row).find('.price').val();
  10.        
  11.         var amount = quantity * price;
  12.         $(row).find('.amount').val(amount.toFixed(3));
  13.      
  14.         totalAmount += amount;
  15.       });
  16.  
  17.       netAmount = totalAmount;
  18.       discount = $("#discount").val();
  19.       if (discount) {
  20.         netAmount = totalAmount - discount;
  21.       }
  22.      
  23.       $("#total-amount").html(totalAmount.toFixed(3))
  24.       $("#net-amount").html(netAmount.toFixed(3))
  25.     });
  26.    
  27.    
  28.     $("#discount").keyup(function() {
  29.         var discount = +$("#discount").val();
  30.  
  31.      
  32.         $("#net-amount").html((totalAmount - discount).toFixed(3));
  33.     });
  #2 (permalink)  
Antiguo 05/04/2021, 20:42
 
Fecha de Ingreso: noviembre-2004
Ubicación: NULL
Mensajes: 619
Antigüedad: 16 años, 4 meses
Puntos: 6
Respuesta: Multiplicar Cantidad * Precio = Total

se me ocurre que se le podría agregar el símbolo de moneda, pero no se como integrarlo

http://jsfiddle.net/1h29dguy/


Código Javascript:
Ver original
  1. <script>
  2. function FormatCurrency ()
  3. {
  4.     var amount = parseFloat(document.getElementById('amount').value);
  5.    
  6.     document.getElementById('output').innerHTML =
  7.         amount.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
  8. }
  9. </script>



La zona horaria es GMT -6. Ahora son las 18:08.