Hoe te veranderen in een Text Input Box in jQuery Detect

stemmen
0

Ik heb twee tekstinvoer tekstvak en ik wil het totaal van welke niet ingevoerd door de gebruiker te doen. Hieronder is mijn code:

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

Toen ik ingang 10eerst dan duurt het 11dan, als ik voer 100 dan duurt 111, ben ik niet krijgen waarom dit gebeurt. Waar ik ben het maken van een fout, te begeleiden me?

De vraag is gesteld op 24/10/2019 om 12:52
bron van user
In andere talen...                            


3 antwoorden

stemmen
2

Op uw code wanneer u het eerste cijfer in te voeren het is berekend op de totale omdat total += parseInt($(this).val()). bijvoorbeeld als eerste cijfer 1 is, op dat moment totaal wordt bijgesteld als total = 1op de tweede toetsaanslag, bijvoorbeeld, neemt 0, dan is uw inkomend totaal wordt 10 het berekenen van de huidige totale waarde total = total + 10. dat is de reden waarom u krijgt 11 als antwoord

Probeer als deze.

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

antwoordde op 24/10/2019 om 12:58
bron van user

stemmen
0

De reden waarom het niet toonde u het resultaat dat u wilt, is omdat de berekening is verkeerd. U het nummer nu aan het totaal, elke keer dat een invoerveld verandert. Dus als je het type 123, duurt het 0 + 1, dan is 1 + 12, toen 13 + 123 dus je 136 hebben als resultaat.

Ik schreef een mogelijke oplossing voor uw vraag. De code is in de onderstaande viool.

Je kon een functie waar u het totaal van alle invoervelden berekenen toe te voegen (kan meer dan 2 zijn, het is generiek).

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

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

En op de verandering van uw invoervelden, alleen jij die functie uit te voeren.

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

Zijn voorbeeld is in deze viool: https://jsfiddle.net/xL6hgder/2/

antwoordde op 24/10/2019 om 13:01
bron van user

stemmen
0

Met de verandering bij plaats van de invoergebeurtenis. Het zal alleen geactiveerd wanneer de waarde is "toegewijd", in plaats van elke toetsaanslag. Zie MDN voor meer informatie.

antwoordde op 24/10/2019 om 12:59
bron van user

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