0

Estoy tratando de sumar los valores de los input del div derecha, ignorando los valores del div izquierda...

VER DEMO

El asunto es que no me sale. El script me suma todos los inputs, estén donde estén.

¿Alguna idea de cómo indicarle al script que ignore el div izquierda...?

Muchas gracias...

<div id="izquierda">
  <input name="qty1" value="240">
  <input name="qty2" value="862">
  <input name="qty3" value="911">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

<div id="derecha">
  <input name="qty1" value="2">
  <input name="qty2" value="2">
  <input name="qty3" value="2">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

<div id="cont-resultado">
<input name="total" id="total">
<a href="javascript:sumInputs()">Ver total</a>
</div>

window.sumInputs = function() {
    var inputs = document.getElementsByTagName('input'),
        result = document.getElementById('total'),
        sumar = 0;            

    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];

        if (ip.name && ip.name.indexOf("total") < 0) {
            sumar += parseInt(ip.value) || 0;
        }
    }

    result.value = sumar;
}

2 respuestas 2

0

$(document).ready(function(){
var valores = $('#derecha').children();

var suma = 0;
$.each(valores,function(){
  valor = $(this).val() || 0;
  suma += parseInt( valor );
});

console.log(suma);


});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="izquierda">
  <input name="qty1" value="240">
  <input name="qty2" value="862">
  <input name="qty3" value="911">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

<div id="derecha">
  <input name="qty1" value="2">
  <input name="qty2" value="2">
  <input name="qty3" value="2">
  <input name="qty4" value="">
  <input name="qty5" value="">
  <input name="qty6" value="">
  <input name="qty7" value="">
  <input name="qty8" value="">
</div>

<!-- ================ -->

Tienes que hacer referencia unicamente al div de la derecha. En tu codigo, fijate que estás recogiendo todos los inputs

getElementsByTagName('input')

y por eso te está sumando todos los valores.

Te dejo aquí el código en jQuery:

$(document).ready(function(){
var valores = $('#derecha').children();

var suma = 0;
$.each(valores,function(){
  valor = $(this).val() || 0;
  suma += parseInt( valor );
});
console.log(suma);  
});

ACTUALIZACIÓN:

Te dejo aquí el ejemplo de fiddle que me has puesto. Simplemente he puesto el codigo que te proponia al principio de mi respuesta y lo he puesto en una función que he llamado "sumar()". Entonces, ejecutamos la función al principio de la carga de la página (para que ya te sume los valores desde el principio) y he agregado un evento click sobre el link de "Ver total", donde he sustituido la llamada a la función que tenias (onclick) por la llamada a la función sumar.

He puesto también que el resultado se muestre en un span con id "suma-valores". Creo que lo verás bastante claro. De todas formas, si no es así, no te preocupes. Pregunta y lo vemos.

Espero que te haya servido. Un saludo!

3
  • tu respuesta parece maravillosa (muchas gracias), pero algo estoy haciendo mal en el script porque no puedo ver el resultado... VER LINK : jsfiddle.net/wkj9x6f1/18
    – Pablo_Web
    el 14 abr. 2019 a las 20:30
  • @Pablo_Web , basadome en el ejemplo que me pones de jsfiddle he modificado un poquito tu código. Échale un vistazo. Yo creo que lo verás a la primera.
    – cooper
    el 14 abr. 2019 a las 22:42
  • No sé que pasará, pero no funciona. Igual muchas gracias, y he respondido mi propia pregunta. El resultado aquí: jsfiddle.net/puro8xke Echale un vistazo. Muchas gracias. Un saludo.
    – Pablo_Web
    el 14 abr. 2019 a las 22:52
0

Voy a responderme a mi mismo, que con un poco de ayuda en otros sitios logré hacerlo, y puede resultar muy útil para otros usuarios:

VER DEMO AQUÍ

<div id="cont-resultado">
<input name="total" id="total">
<a id='sumup' href="#">See total</a>
<!--<a href="javascript:sumInputs()">See total</a>-->
</div>

$(document).ready(function() {
  function sumInputs(e) {
    e.preventDefault();
    var valores = $('#derecha').children('input');
    var suma = 0;
    $.each(valores, function() {
      valor = $(this).val();
      suma += Number(valor);
    });

    valores = document.getElementById('total');
    $(valores).val(suma);
  }

  $('#sumup').on('click', sumInputs);
});
2
  • Entendí mal entonces donde querías sacar el resultado. Si te fijas en mi ejemplo, lo muestro donde pone "El resultado de éste ejemplo debe ser =". Me alegro de que lo hayas podido hacer por ti mismo. Espero que lo hayas entendido todo bien. Un saludo!
    – cooper
    el 14 abr. 2019 a las 23:22
  • Entiendo cooper. Igual estoy aprendiendo poco a poco. Creo que todos alguna vez pasamos por el principio desde cero... Muchas gracias por tu amable ayuda (y de todos los demás). Es gratificante aprender así... :) ... Un saludo!.
    – Pablo_Web
    el 14 abr. 2019 a las 23:47

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.