1

ahora bien ya me realiza el calculo y me aparece en cada etiqueta span, mi inquietud es como se puede realizar la suma de todos los span al presionar el boton de clase btnPedir aqui esta mi html

 <thead>
                                    <th>NOMBRE</th>
                                    <th>IMAGEN</th>
                                    <th>COSTO</th>
                                    <th>CANTIDAD</th>
                                    <th>PRECIO</th>
                                    <th></th>
                                    </thead>
                                    <?php while ($usuarios = $resultado->fetch_assoc()) { ?>
                                        <tr>
                                            <td><?php echo"{$usuarios["NOMBRE"]}" ?></td>
                                            <td><img src="<?php echo"{$usuarios["IMAGEN"]}" ?>" width="80px" class="img-responsive"></td>
                                            <td><input value="<?php echo"{$usuarios["COSTO"]}" ?>" id="costo" disabled style="width: 25%"></td>
                                            <td><input type="number" min="0" class="input-sm" id="cantidad" style="width: 25%"></td>
                                            <td><span id="resp"></span></td>
                                            <td><button class="btn btn-primary btnCalcula">Agregar</button></td>
                                        </tr>

                                    <?php } ?>
                                </table>
<button class="btnPedir">Agregar</button>

aqui esta mi JS

<script>       
var allButtons = document.querySelectorAll('button.btnCalcula');


        allButtons.forEach(function (btn, index) {
            btn.addEventListener('click', function (e) {

                var thisCells = event.target.parentNode.parentNode.cells;
                var valOne = thisCells[2].children[0].value;
                var valTwo = thisCells[3].children[0].value;
                var thisSpan = thisCells[4].children[0];
                var total = parseFloat(valOne) * parseFloat(valTwo);
        var aux += total;
        var txtSuma = aux;
        //quiero que la suma se active al presionar el boton pedir
                var txtSpan = `${total} $`;
                thisSpan.textContent = txtSpan;

            });
        });

1 respuesta 1

0

Te muestro aquí una aproximación interesante para calcular el total. Se trata de lo siguiente:

  • Poner en el span de cada fila un atributo data subtotal, para ir registrando en dicho atributo el estado actual de cada fila. Dicho atributo debe crearse con un valor 0 por defecto, el cual se irá cambiando dinámicamente. El elemento quedaría así: <span data-subtotal="0"> en cada fila. Estos atributos no son visibles en la página, por lo que son de suma utilidad para manejar datos internos.
  • Crear una función getTotal que será llamada cada vez que se pulse el botón Calcular Total. Esa función seleccionará todos los span que tienen el atributo data-subtotal y sumará los valores que hay en esos atributos.
  • Cada vez que se agregue un valor en una fila, el span de esa fila guardará el total calculado para esa fila con thisSpan.dataset.subtotal = total; y se actualizará el contenedor general (fondo verde) llamando también a la función getTotal.

Esta lógica permite mantener el total general actualizado siempre.

He puesto comentarios a lo largo del código, para que se comprenda lo que ocurre en cada momento.

Espero te sirva.

var btnTotal = document.getElementById('btnTotal');
btnTotal.onclick = getTotal;

/*
  Esta función es invocada siempre que se necesite calcular el total
  sea desde el botón Calcula Total,
  sea desde el botón que agrega nuevos valores en cada fila
*/
function getTotal() {
  /*
    Buscamos el atributo data-valor de cada span
  */
  var allSubTotal = document.querySelectorAll('span[data-subtotal]');
  var totalGlobal = 0;
  /*
    Leemos los valores en cada data-valor y lo sumamos a totalGlobal
  */
  allSubTotal.forEach(function(el) {
    var subTotal = parseInt(el.dataset.subtotal);
    totalGlobal += subTotal;
  });
  console.log(`TOTAL GENERAL: ${totalGlobal}`); //prueba
  /*
    Devolvemos el valor a quien llamó la función
  */
  return totalGlobal;
}


/*
  --- LÓGICA PARA LAS FILAS ---
  Seleccionamos todos los botones con la clase btnCalcula
*/
var allButtons = document.querySelectorAll('button.btnCalcula');

/*
  A todos esos botones le aplicamos la misma función
  Cualquiera de ellos que sea clickeado lanzará
  este bloque de código....
*/
allButtons.forEach(function(btn, index) {
  btn.addEventListener('click', function(e) {
    /*
      Ahora vamos a recuperar las celdas de la fila
      donde se encuentra el botón para sacar los valores
      y para cambiar el texto del span
    */
    var thisCells = event.target.parentNode.parentNode.cells;
    var valOne = thisCells[0].children[0].value;
    var valTwo = thisCells[1].children[0].value;
    var thisSpan = thisCells[2].children[0];
    var total = parseInt(valOne) * parseInt(valTwo);
    var txtSpan = `El total de tu compra es: ${total}$`;
    thisSpan.textContent = txtSpan;
    /*
      Actualizamos el atributo data-subtotal del span
    */
    thisSpan.dataset.subtotal = total;
    var cellTotal = document.getElementById('total');
    /*
      Invocamos a getTotal para actualizar el contenedor verde
    */
    cellTotal.textContent = getTotal();
  });
});
#total {
  background-color: #C8E6C9;
}
<table>
  <tr>
    <td><input type="text" value="10" readonly></td>
    <td><input type="number"></td>
    <td><span data-subtotal="0"></span></td>
    <td><button class="btnCalcula">Calcula</button></td>
  </tr>
  <tr>
    <td><input type="text" value="5" readonly></td>
    <td><input type="number"></td>
    <td><span data-subtotal="0"></span></td>
    <td><button class="btnCalcula">Calcula</button></td>
  </tr>
  <tr>
    <td>TOTAL:</td>
    <td id="total"></td>
    <td></td>
    <td></td>
  </tr>
</table>
<button id="btnTotal">Calcula Total</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.