Hvordan oppdage Endring i tekstfeltet i jQuery

På koden din når du taster inn det første sifferet er det blitt beregnet til totalt fordi total += parseInt($(this).val()). for eksempel, hvis ditt første sifferet er en så på den tiden totalt oppdaterer som total = 1, på den andre tastetrykk, for eksempel ta 0, så dine innspill totalt blir 10 år den beregner til dagens totale verdien som total = total + 10. det er derfor du får 11 som svar

Prøv som dette.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        // Print entered value in a div box
        if ($("#myInput1").val() && $("#myInput2").val()) {
           total = parseInt(parseInt($("#myInput1").val()) + parseInt($("#myInput2").val()));
           $("#result").text(total);
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput1"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput2"></p>
<div id="result"></div>

Bruk endring hendelse i stedet for inngangs hendelsen. Det vil bare fyre når verdien er "forpliktet", i stedet for hvert tastetrykk. Se MDN for detaljer.

Grunnen til at det ikke viste deg det resultatet du vil, er fordi beregningen er feil. Du kan nå legge til nummeret til den totale, hver gang en inngang feltet endres. Så hvis du skriver 123, det tar 0 + 1, deretter 1 + 12, deretter 13 + 123 så du har 136 som resultat.

Jeg skrev en mulig løsning for spørsmålet ditt. Koden er på fele under.

Du kan legge til en funksjon hvor du beregne summen av alle input felt (kan være mer enn to, det er generisk).

function calculateTotal(){
  var total = 0;
    $( ".test" ).each(function( index ) {
      var value = $(this).val();
      if(value == ""){
        return;
      }
      total += parseInt(value);

    });
  $("#result").text(    total);
}

Og på endringen av input felt, du bare utføre denne funksjonen.

$(document).ready(function(){
    var total = 0;
    $(".test").on("input", function(){
        calculateTotal();
    });
});

Ditt eksempel er i denne fele: https://jsfiddle.net/xL6hgder/2/

Du bare oppdatere totalt med at inngangsverdien som du prøver å endre.

For å få totalen for begge inngangsverdier må du ta begge verdiene og legge den med totalen.

Prøv nedenfor Kode

$(document).ready(function() {
  $(".test").on("change", function() {
    var total = 0;
    $('.test').each(function() {
      if (!isNaN(parseInt($(this).val()))) {
        total += parseInt($(this).val());
      }
    });
    // Print entered value in a div box

    $("#result").text(total);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<p><input type="text" class="test" placeholder="Type something..." id="myInput"></p>
<div id="result"></div>

 $(document).ready(function () {
        $(".test").on('input', function () {
            var total = parseInt($("#result").text());
            total = parseInt($("#myInput").val()) + parseInt($("#myInput1").val());
            $("#result").text(total);
        });
    });

 <p><input type="text" class="test" placeholder="Type something..." id="myInput" /></p>
    <p><input type="text" class="test" placeholder="Type something..." id="myInput1" /></p>
    <div id="result"></div>