0

Soy nuevo en esto, estoy creando inputs dinámicamente en los cuales quiero multiplicar números que voy ingresando y que los resultados se vayan sumando en un input aparte.

Este es mi código de creación de inputs:

<div class="inputs"></div>
<button type="button" id="agregar">AGREGAR</button><br><br>
Total:<input id="total" type="text" readonly>
 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#agregar").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='resultado_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
 </script>

 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input id='nn_"+index+"'> X <input id='mm_"+index+"'> = <input id='resultado_"+index+"' readonly></div>";
   $(".inputs").append(add);
 </script>
</body>
</html>

Como se muestra, quiero que al ingresar números en cada nn y mm input estos valores se multipliquen y salga el resultado en su respectivo input resultado y que además a medida que esté haciendo esto los resultados de las multiplicaciones se sumen y salga en el input total

Cómo puedo lograr esto?

Agradecería su ayuda.

1 respuesta 1

2

Aprovechando que tienes el índice definido para cada input, una opción sencilla sería añadir en el evento onblur de cada input una llamada a una función que te calcule la multiplicación y la suma total:

<div class="inputs"></div>
<button type="button" id="agregar">AGREGAR</button><br><br>
Total:<input id="total" type="text" readonly>

 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#agregar").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"' onblur='calcularMult(" + index + ")'> X <input id='mm_"+index+"' onblur='calcularMult(" + index + ")'> = <input id='resultado_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
  
  function calcularMult(idx){
  $("#resultado_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());
  var sum = 0;
  $("input[id^='resultado_']").each(function() {
    sum += Number($(this).val());
   });         
    $("#total").val(sum);
  }
 </script>

O podrías hacerlo con el evento onkeypress. Eso ya lo dejo a tu gusto :)

<div class="inputs"></div>
<button type="button" id="agregar">AGREGAR</button><br><br>
Total:<input id="total" type="text" readonly>

 <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
 <script>
  $("#agregar").click(function(){
   var cont = $(".numb").length;
   var index = cont + 1;
   var add = "<div><input class='numb' id='nn_"+index+"' onkeyup='calcularMult(" + index + ")'> X <input id='mm_"+index+"' onkeyup='calcularMult(" + index + ")'> = <input id='resultado_"+index+"' readonly></div>";
   $(".inputs").append(add);
  });
  
  function calcularMult(idx){
  $("#resultado_" + idx).val($("#nn_" + idx).val() * $("#mm_" + idx).val());
  var sum = 0;
  $("input[id^='resultado_']").each(function() {
    sum += Number($(this).val());
   });           
    $("#total").val(sum);
  }
 </script>

3
  • Gracias por tu respuesta, el código funciona bien pero yo usaría el evento keyup, aparte que he detectado que si cambio los números, por ejemplo si en la primera pongo 2x2 y en la segunda también, el total sale 8, hasta ahí perfecto pero si cambio el 2 por un 3 en la primera (3x2) debería salir en total 10 pero sigue sumando el valor anteriormente calculado, cómo lo arreglo?
    – NekoLopez
    el 29 may. 2018 a las 15:17
  • Tienes razón, estaba mal hecha la suma, la he cambiado para que recalcule la suma con todos los inputs cuyos ids empiezan por "resultado_". Para ellos los recorro con un each y voy añadiendo el su valor a una suma total: var sum = 0; $("input[id^='resultado_']").each(function() { sum += Number($(this).val()); }); $("#total").val(sum); }
    – Kiko_L
    el 29 may. 2018 a las 19:50
  • Genial, ahora funciona mejor
    – NekoLopez
    el 29 may. 2018 a las 20:33

Tu Respuesta

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

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