Cum de a detecta schimbările într-o casetă de text în jQuery

voturi
0

Am două caseta de text de text de intrare și vreau să fac totalul indiferent nici introduse de utilizator. Mai jos este codul meu:

$(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>

Când am intrare în 10primul rând , atunci este nevoie 11, apoi , dacă am intra 100 , atunci este nevoie 111, eu nu sunt obtinerea de ce acest lucru se întâmplă. În cazul în care am face o eroare, ghid eu?

Întrebat 24/10/2019 la 12:52
sursa de către utilizator
În alte limbi...                            


3 răspunsuri

voturi
2

Pe codul atunci când introduceți prima cifră este calculat la total , deoarece total += parseInt($(this).val()). de exemplu, în cazul în care prima cifră este 1 , apoi la acel moment totală este actualizarea ca total = 1, pe a doua apăsare a unei taste, de exemplu, ia 0, atunci numărul total de intrare devine 10. este calcularea la valoarea totală a curentului ca total = total + 10. de aceea te primesc 11 ca răspuns

Încearcă așa.

$(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>

Publicat 24/10/2019 la 12:58
sursa de către utilizator

voturi
0

Motivul pentru care nu te-ai arătat rezultatul pe care doriți să, se datorează faptului că calcul este greșit. Acum adăugați numărul la total, de fiecare dată când un câmp de intrare modificări. Deci, dacă tastați 123, este nevoie de 0 + 1, apoi 1 + 12, apoi 13 + 123, astfel încât veți avea 136 ca rezultat.

Am scris o posibilă soluție pentru întrebarea dumneavoastră. Codul este în cetera de mai jos.

Ai putea adăuga o funcție în cazul în care ați calcula totalul tuturor câmpurilor de intrare (poate fi mai mare de 2, este generic).

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

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

Și schimbarea câmpurile de intrare, executați doar că funcția.

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

Exemplul tău este în această vioară: https://jsfiddle.net/xL6hgder/2/

Publicat 24/10/2019 la 13:01
sursa de către utilizator

voturi
0

Utilizați evenimentul de schimbare în locul evenimentului de intrare. Acesta se va declanșa numai atunci când valoarea este „angajat“, în loc de fiecare apăsare de tastă. A se vedea MDN pentru detalii.

Publicat 24/10/2019 la 12:59
sursa de către utilizator

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