1

Hola tengo este código que realiza la suma de los inputs que tienen la clase monto y muestra el resultado automáticamente en el input total, pero necesito que detecte si el ultimo input que tiene la clase resta tiene valor y luego reste dicho valor a la suma de los inputs anteriores.

function sumar()
{
  const $total = document.getElementById('total');
  let subtotal = 0;
  [ ...document.getElementsByClassName( "monto" ) ].forEach( function ( element ) {
    if(element.value !== '') {
      subtotal += parseFloat(element.value);
    }
  });
  $total.value = subtotal;
}

<span>Valor #1</span>
<input type="number" id="txt_campo_1" class="monto" onchange="sumar();" />
<br/>

<span>Valor #2</span>
<input type="number" id="txt_campo_2" class="monto" onchange="sumar();" />
<br/>

<span>Valor #3</span>
<input type="number" id="txt_campo_3" class="monto" onchange="sumar();" />

<span>Valor #4</span>
<input type="number" id="txt_campo_4" class="restar" onchange="sumar();" />

<hr>
<span>TOTAL </span>
<input type="number" id="total" value="0" readonly/>

1 respuesta 1

2

Puedes hacer lo siguiente:

  • Capturas a tu input txt_campo_4 y almacenarlo en una variable.
  • Inicializas una variable (llamado valueResta) para asignar su valor si el valor de txt_campo_4 es diferente a vacío, de lo contrario, será 0.
  • Creamos una variable total en el que su valor será el subtotal menos el valueResta, y le asignas al valor del input $total.

Demo:

function sumar() {
  const $total = document.getElementById('total');
  const restaInput = document.getElementById("txt_campo_4");
  
  let subtotal = 0;
  let valueResta = 0;
  
  [ ...document.getElementsByClassName( "monto" ) ].forEach( function ( element ) {
    if(element.value !== '') {
      subtotal += parseFloat(element.value);
    }
  });

  if (restaInput.value !== '') {
    valueResta = parseFloat(restaInput.value);
  }

  const total = subtotal - valueResta;

  $total.value = total;
}
<span>Valor #1</span>
<input type="number" id="txt_campo_1" class="monto" onchange="sumar();" />
<br/>

<span>Valor #2</span>
<input type="number" id="txt_campo_2" class="monto" onchange="sumar();" />
<br/>

<span>Valor #3</span>
<input type="number" id="txt_campo_3" class="monto" onchange="sumar();" />

<span>Valor #4</span>
<input type="number" id="txt_campo_4" class="restar" onchange="sumar();" />

<hr>
<span>TOTAL </span>
<input type="number" id="total" value="0" readonly/>

1
  • 1
    Excelente muchas gracias :) Commented el 7 jul. 2023 a las 0:21

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.