Skip to main content
5 de 6
se añadieron 44 caracteres en el cuerpo

¿Como puedo calcular el "Total General" de una tabla con JavaScript?

Estoy calculando unas cantidades con precio unitario y subtotales. El problema está cuando quiero calcular el "Total General". Así va mi código:

    function multiplicar() {
    var quantity = document.querySelectorAll('.quantity');
    var price = document.querySelectorAll('.price');
    var subtotals = document.querySelectorAll('.subtotal');
    var totals = document.querySelectorAll('.totals');

    for(var i = 0; i < quantity.length; i++){ 
      subtotals[i].value = quantity[i].value * price[i].value;
    }

    for(var i = 0; i < subtotals.length; i++){ 
      totals[i].value = subtotals[i].value;
    }

  }

Esas últimas líneas de código no me funcionan como pensé. Los cálculos de quantity y price están perfectos pero al sumar los subtotales no me muestra el calculo en:

<input type="text" name="total" class="totals">

He estado haciendo pruebas y ahora estoy más cerca. Lo que he hecho es agregar una nueva funcion llamada suma() que se ejecuta si hay cambios en los subtotales y ahora me muestra resultados en .total pero no los suma si no que los agrega; es decir 1 + 1 no es 2 sino que resulta 11.

El nuevo código va así:

 function multiplicar() {
    var quantity = document.querySelectorAll('.quantity');
    var price = document.querySelectorAll('.price');
    var subtotals = document.querySelectorAll('.subtotal');
   
    for(var i = 0; i < quantity.length; i++){ 
      subtotals[i].value = quantity[i].value * price[i].value;
    }

  }

    function sumar() {
    var subtotal1 = document.querySelectorAll('#subtotal1');
    var subtotal2 = document.querySelectorAll('#subtotal2');
    var totals = document.querySelectorAll('.total');
   
    for(var i = 0; i < subtotal1.length; i++){ 
      totals[i].value = subtotal1[i].value + subtotal2[i].value;
    }

  }
<input type="text" class="subtotal" id="subtotal1" onchange="sumar()">
<input type="text" class="subtotal" id="subtotal2" onchange="sumar()">
<input type="text" class="totals">