Código de JavaScript - Multiplicar los inputs por filas y hacer el total

Pos: 5

Val: 1.807

Ha mantenido su posición en JavaScript (en relación al último mes)

Multiplicar los inputs por filas y hacer el total

JavaScript

(3)

Publicado el 21 de Junio del 2018 por Xavi (548 códigos)

7.171 visualizaciones desde el 21 de Junio del 2018

Este simple código, muestra como multiplicar el precio del producto por la cantidad indicada por el usuario en cada producto por separado, a medida que el usuario va introduciendo los importes y/o cantidades. También realiza la suma total de los productos.

multiplicar-productos-javascript

Versión 1
(3)

Actualizado el 25 de Junio del 2018 (Publicado el 21 de Junio del 2018)

gráfica de visualizaciones de la versión: Versión 1

7.172 visualizaciones desde el 21 de Junio del 2018

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<!DOCTYPE html>

<html>

<head>

    <style>

    .monto {text-align:right;}

    .totales {font-weight:bold;}

    </style>

</head>

<body>

    <table>

        <thead>

            <tr>

                <th>producto</th>

                <th>Precio por unidad</th>

                <th>Cantidad</th>

                <th>Precio por producto</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    Producto A

                </td>

                <td>

                    <input type="number" class="monto input" value="22.50">

                </td>

                <td>

                    <input type="number" class="monto input">

                </td>

                <td>

                    <input type="text" class="monto total" value="0" disabled>

                </td>

            </tr>

            <tr>

                <td>

                    Producto B

                </td>

                <td>

                    <input type="number" class="monto input" value="7.00">

                </td>

                <td>

                    <input type="number" class="monto input">

                </td>

                <td>

                    <input type="text" class="monto total" value="0" disabled>

                </td>

            </tr>

            <tr>

                <td>

                    Producto C

                </td>

                <td>

                    <input type="number" class="monto input" value="30.12">

                </td>

                <td>

                    <input type="number" class="monto input">

                </td>

                <td>

                    <input type="text" class="monto total" value="0" disabled>

                </td>

            </tr>

            <tr>

                <td></td>

                <td></td>

                <td>

                    Total

                </td>

                <td>

                    <input type="text" class="monto totales" value="0" disabled>

                </td>

            </tr>

        </tbody>

    </table>

</body>

</html>

<script>

// generamos un evento click y keyup para cada elemento input con la clase .input

var input=document.querySelectorAll(".input");

input.forEach(function(e) {

    e.addEventListener("click",multiplica);

    e.addEventListener("keyup",multiplica);

});

// funcion que genera la multiplicacion

function multiplica() {

    // nos posicionamos en el tr del producto

    var tr=this.closest("tr");

    var total=1;

    // recorremos todos los elementos del tr que tienen la clase .input

    var inputs=tr.querySelectorAll(".input");

    inputs.forEach(function(e) {

        total*=e.value;

});

    // mostramos el total con dos decimales

    tr.querySelector(".total").value=total.toFixed(2);

    // indicamos que calcule el total

    calcularTotal(this.closest("table"));

// funcion que calcula la suma total de los productos

function calcularTotal(e) {

    var total=0;

    // obtenemos todos los totales y los sumamos

    var totales=e.querySelectorAll(".total");

    totales.forEach(function(e) {

        total+=parseFloat(e.value);

});

    // mostramos la suma total con dos decimales

    e.getElementsByClassName("totales")[0].value=total.toFixed(2);

</script>

Comentarios sobre la versión: Versión 1 (3)

xve

21 de Junio del 2018

No ha dejado ningún comentario

Responder

ScriptShow

16 de Agosto del 2018

No ha dejado ningún comentario

Responder

antonio

1 de Julio del 2020

El ejemplo es fabuloso muchas gracias y una pregunta puede alguien decirme como sumar mas conceptos después del total.

Es decir el total es en realidad un subtotal al que se calcula el 16% del iva , otros descuentos y por fin al final obtenemos el total real.

Agradezco la atención.

Responder