Hvordan oppdage Endring i tekstfeltet i jQuery

stemmer
0

Jeg har to skriving tekstboksen, og jeg vil gjøre alt hva ingen angitt av brukeren. Nedenfor er min kode:

$(document).ready(function(){
    var total = 0;
    $(.test).on(input, function(){
        // Print entered value in a div box
        total += parseInt($(this).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=myInput></p>
    <p><input type=text class=test placeholder=Type something... id=myInput></p>
    <div id=result></div>

Når jeg innspill 10første så tar det 11, så går jeg inn 100 så tar det 111, jeg ikke får hvorfor dette skjer. Hvor jeg gjør en feil, før meg?

Publisert på 24/10/2019 klokken 11:52
kilden bruker
På andre språk...                            


5 svar

stemmer
2

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>

Svarte 24/10/2019 kl. 11:58
kilden bruker

stemmer
0

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.

Svarte 24/10/2019 kl. 11:59
kilden bruker

stemmer
0

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/

Svarte 24/10/2019 kl. 12:01
kilden bruker

stemmer
1

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>

Svarte 24/10/2019 kl. 12:05
kilden bruker

stemmer
0
 $(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>
Svarte 24/10/2019 kl. 12:26
kilden bruker

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more