0

Tengo estos dos inputs number, donde pretendo que mientras la cantidad aumente, al input de abajo se le sumen, eso si lo hace el problema es que, por ejemplo si la cantidad de abajo es 63 y el input de arriba esta en 4 al bajar a 3, en el otro en vez de restarle le suma.

Como le puedo hacer para restarle cantidad?

function extra() {
    const $total = document.getElementById("Consumo_Asignado");
    let subtotal = 0;
    [...document.getElementsByClassName("monto")].forEach(function (element) {
        if (element.value !== '') {
            subtotal += parseFloat(element.value);
        }
    });   
        $total.value = subtotal + parseFloat($total.value);  
}
<div class="row">
<input type="number" onchange="extra();"  class="form-control monto" id="Consumo_extra" style="text-align: center; color: #523e02; font-weight: bold; ">
</div>


<div class="row">
<input value="50" type="number" class="form-control" id="Consumo_Asignado" style="text-align: center; color: #523e02; font-weight: bold; " />
</div>
  

1 respuesta 1

1

Te pasa eso porque no estás guardando el valor original.

Tu dices que

  • Arriba tienes 4
  • Abajo 63

Cuando disminuye de 4 a 3, lo que haces es 63+3 = 66, y si luego pasas de 3 a 2, haces 66 + 2

Puedes guardar el valor original en un atributo data-valor y realizar las operación a partir de él

const $total = document.getElementById("Consumo_Asignado");
const original_value =  Number($total.getAttribute("data-valor"));

function extra() {
    document.querySelectorAll(".monto").forEach(e => {
         $total.value = original_value + Number(e.value) 
    });    
}
<div class="row">
<input type="number" oninput="extra();" value="0"  class="form-control monto" id="Consumo_extra" style="text-align: center; color: #523e02; font-weight: bold; ">
</div>


<div class="row">
<input value="50" data-valor="50" type="number" class="form-control" id="Consumo_Asignado" style="text-align: center; color: #523e02; font-weight: bold; " />
</div>

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.