Come rilevare il cambiamento in una casella di testo di input in jQuery

voti
0

Ho casella di testo di input due testo e voglio fare il totale di tutto ciò che non immessa dall'utente. Qui di seguito è il mio codice:

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

Quando ho ingresso 10prima poi ci vuole 11, quindi se entro 100 poi ci vuole 111, io non sto ottenendo il motivo per cui questo accada. Dove sto facendo un errore, mi guida?

È pubblicato 24/10/2019 alle 12:52
fonte dall'utente
In altre lingue...                            


3 risposte

voti
2

Sul vostro codice quando si immette la prima cifra è stata calcolata al totale perché total += parseInt($(this).val()). per esempio, se la prima cifra è 1 allora a quel tempo totale aggiorna come total = 1, sulla seconda pressione del tasto, per esempio, prendere 0, allora il totale ingresso diventa 10. si calcola il valore totale attuale total = total + 10. è per questo che si stanno ottenendo 11 come risposta

Prova in questo modo.

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

Risposto il 24/10/2019 a 12:58
fonte dall'utente

voti
0

Il motivo per cui non ha mostrato il risultato che si desidera, è perché il calcolo è sbagliato. A questo punto aggiungere il numero al totale, ogni volta che si cambia campo di input. Quindi, se si digita 123, ci vuole 0 + 1, quindi 1 + 12, quindi 13 + 123 in modo da dovrete 136 come risultato.

Ho scritto una possibile soluzione per la tua domanda. Il codice è in violino sotto.

Si potrebbe aggiungere una funzione in cui si calcola il totale di tutti i campi di input (può essere superiore a 2, è generico).

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

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

E sul cambiamento dei vostri campi di input, basta eseguire quella funzione.

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

Il vostro esempio è in questo violino: https://jsfiddle.net/xL6hgder/2/

Risposto il 24/10/2019 a 13:01
fonte dall'utente

voti
0

Utilizzare l'evento di modifica anziché l'evento di input. Esso si attiva solo quando il valore è "impegnata", invece di ogni battitura. Vedere MDN per i dettagli.

Risposto il 24/10/2019 a 12:59
fonte dall'utente

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