compute Summe dynamisch mit javascript

Habe ich zwei Textfelder Num1 und Num2 und ein anderes Textfeld Sum mit dem Wert 10.

Wie kann ich dies tun, wobei, wenn der Benutzer eine Zahl eingeben, die für Num1, wird es fügen Sie es zu Sum dynamisch und ändern Sie die angezeigte Nummer in der Sum textbox. Wenn der Benutzer eine Zahl eingeben, die in Num2 es wird auch hinzufügen, dass die Anzahl der aktualisierten Anzahl gezeigt, in Sum textbox dynamisch und ändern Sie den Wert für Sum textbox auch.

Wie dies in Javascript?

InformationsquelleAutor anonymous | 2010-10-27

  1. 4

    Sowas:

    <input type="text" id="Num1" value="1" onblur="recalculateSum();"/>
<span>+</span>
<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>
<span>=</span>
<input type="text" id="Sum" value=""/>
<script>

    function recalculateSum()
    {
        var num1 = parseInt(document.getElementById("Num1").value);
        var num2 = parseInt(document.getElementById("Num2").value);
        document.getElementById("Sum").value = num1 + num2;

    }

</script>
    es gibt ein problem, weil wenn ich mit '+' es wird verketten.
    es nicht. Es gibt parseInt.

    InformationsquelleAutor TarasB

  2. 4

    Andere version.

    
<!DOCTYPE html>
<html>
<head>
<title>Summer</title>
</head>
<body>
  Num 1: <input type="text" id="num1" name="num1" value="4"/><br />
  Num 2: <input type="text" id="num2" name="num2" value="6"/><br />
  Sum    <input type="text" id="sum"  name="sum" value="10">

<script type="text/javascript">
  var _num1 = document.getElementById('num1');
  var _num2 = document.getElementById('num2');
  var _sum  = document.getElementById('sum');

  _num1.onblur = function(){
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
  };
  _num2.onblur = function(){
    _sum.value = (parseInt(_sum.value,10) + parseInt(this.value,10));
  };  
</script>
</body>
</html>
    persönlich, dies ist die sauberste
    Danke @ScottSEA. Obwohl nach dem Lesen der Kommentare von maerics und Robusto, ging ich mit dem onblur-Ereignis statt, da onchange aktualisieren wird nicht die Summe wenn die gleiche Anzahl wird automatisch in das Eingabefeld. 🙂
    dies gibt mir die kumulative Summe... Zum Beispiel, wenn ich das erste Feld aus 4, 3, bekomme ich 13 statt 9 (bisherige Summe 10 + neue Ziffer 3). Ist das so gewollt?
    nevermind, ich bekomme es. Für einfach die Summe der beiden zahlen, Funktionen ersetzt werden müssen mit: _sum.Wert = (parseInt(_num1.Wert,10) + parseInt(_num2.value,10));

    InformationsquelleAutor T.P.

  3. 3
    <input type="text" id="Num1" name="Num1"/>
<input type="text" id="Num2" name="Num2"/>
<input type="text" id="Sum" name="Sum"/>


function addNums() {
  var num1 = parseInt(document.getElementById('Num1').value,10);
  var num2 = parseInt(document.getElementById('Num2').value,10)
  document.getElementById('Sum').value = (num1 + num2).toString();
}

    Gibt es andere Möglichkeiten, um Referenz-form-Elemente, aber dieses funktioniert.

    Wenn die "addNums" - Funktion wiederholt aufgerufen wird, sagen wir mit setInterval, dann kann die Summe aktualisieren Sie es regelmäßig. Das ist besser, als je auf das "onchange" - handlers der input-Elemente, die ausgelöst werden können zu unerwarteten Zeiten für den Benutzer (z.B. nach Fokus geändert, statt, wenn der Benutzer "abgeschlossen" eingeben).
    Ich denke, du meintest diesen Kommentar für @jtp Antwort. Er spricht über den onchange-Handler. Der Umfang meiner Antwort nichts zu tun hatte, wenn die Funktion aufgerufen wird, wird lediglich dargestellt die mechanik der Zugabe von numerischen Werten in input-Elemente.
    Guter Punkt für das onchange-Ereignis. Auch mit seinem browser Macken, technisch ist es ein semantischer Fehler in diesem Fall, da die Eingabe den gleichen Wert haben, werden nicht aktualisiert, Summe.
    sorry mein Kommentar war verwirrend, ich war versucht zu erklären, wie Ihre mechanik kombiniert werden könnte mit einem trigger, der macht es robuster als eine Lösung mit "onchange" - Handler. (+1)

    InformationsquelleAutor Robusto

  4. 2
    <input type="text" id="Num1" value="1" onblur="recalculateSum();"/>

<input type="text" id="Num2" value="1" onblur="recalculateSum();"/>

<input type="text" id="Sum" value=""/>
<script>

    function recalculateSum()
    {
        var num1 = parseInt(document.getElementById("Num1").value);
        var num2 = parseInt(document.getElementById("Num2").value);
        document.getElementById("Sum").value = num1 + num2;

    }

</script>

    InformationsquelleAutor Jean de Dieu Musengamana

  5. 0
    <!DOCTYPE html>
<html>
<head>

    <script type="text/javascript">
function calculate(){
    var x=parseInt(document.getElementById("first").value);
    var y=parseInt(document.getElementById("second").value);
    document.getElementById("answer").value=(x+y);
    }
    </script>

    <title>exam</title>
</head>

<body>
    <form>
        First:<input id="first" name="first" type="text"><br>
        Second:<input id="second" name="second" type="text"><br>
        Answer:<input id="answer" name="answer" type="text"><br>
        <input onclick="calculate()" type="button" value="Addition">
    </form>
</body>
</html>

    InformationsquelleAutor Zoyeb Shaikh

Schreibe einen Kommentar