1

Hola a todos.

Espero alguien me pueda ayudar. Tengo una dificultad que me ha llevado varios días fastidiando y no he podido resolver

script suma inputs

Tengo estos 3 inputs que deben sumarse en la linea de resultado. Me funciona cuando digito los valores en cada caja de texto. Pero cuando le doy clic sobre los botones de "+" y "-". Cambia el valor en el input, pero no me los suma en el resultado.

Este es el código con el cual estoy realizando este programa

HTML

<div>
    <ul>
      <li>
        <form id="formulario">
          <div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
          <input type="hidden" name="action" value="placeOrder" />
          <input class="number" type="number" id="number" name="number" value="0" />
          <div class="increase value-button" id="increase" value="Increase Value">+</div>
        </form>
      </li>
      <li>
        <form id="formulario">
          <div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
          <input type="hidden" name="action" value="placeOrder" />
          <input class="number" type="number" id="number" name="number" value="0" />
          <div class="increase value-button" id="increase" value="Increase Value">+</div>
        </form>
      </li>
      <li>
        <form id="formulario" name="form">
          <div class="decrease value-button" id="decrease" value="Decrease Value">-</div>
          <input type="hidden" name="action" value="placeOrder" />
          <input class="number" type="number" id="number" name="number" value="0" />
          <div class="increase value-button" id="increase" value="Increase Value">+</div>
        </form>
      </li>
    </ul>

  <div><span>El resultado es: </span> <span id="spTotal"></span></div>

</div>

JS

$('div#increase').on('click', function () {
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal)) {
    $qty.val(currentVal + 1);
  }

});

$('div#decrease').on('click', function () { 
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal) && currentVal > 0) {
    $qty.val(currentVal - 1);
  }

});

function sumar() {
  var total = 0;

  $(".number").each(function() {
    if (isNaN(parseFloat($(this).val()))) {
      total += 0;
    } else {
      total += parseFloat($(this).val());
    }
    
  });
  
  $('#spTotal').html(total)
}

  $('.number').on('keyup', function() {
    sumar();
  })

El código CSS no lo veo necesario. Pero si necesitan reproducir el programa, lo tengo colgado en CodePen

Agradezco toda la ayuda que me puedan proporcionar

2 respuestas 2

1

el problema es que al momento de apretar el boton de mas o menos, cambia el valor, pero nunca lo suma, lo que se me ocurre que debes hacer es, luego de cambiar el valor del input, llamar a la funcion que hace la suma o la resta

$('div#increase').on('click', function () {
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal)) {
    $qty.val(currentVal + 1);
    sumar();
  }

});

$('div#decrease').on('click', function () { 
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal) && currentVal > 0) {
    $qty.val(currentVal - 1);
    sumar();
  }

});

1
  • Gracias Braian. Si creo que me puede funcionar esa solución, voy a probar colocándole un parámetro a la función, para que me funcione. Gracias por la colaboración
    – Jon TMarz
    Commented el 14 sept. 2022 a las 21:54
0

Algo que me percaté es que cuando estás entrando a la función de incrementar y decrementar, nunca estás haciendo el llamado a la función sumar, por la cual no estás sumando nada. La solución sería que al final llames a dicha función:

$('div#increase').on('click', function () {
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal)) {
    $qty.val(currentVal + 1);
  }
  return sumar();
});

$('div#decrease').on('click', function () { 
  var $qty = $(this).closest('#formulario').find('input#number');
  var currentVal = parseInt($qty.val());
  if (!isNaN(currentVal) && currentVal > 0) {
    $qty.val(currentVal - 1);
  }
  return sumar();
});
1
  • 1
    gracias @Cris223511.dev. Me funcionó perfecto tu ayuda
    – Jon TMarz
    Commented el 15 sept. 2022 a las 23:44

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.