Beträge addieren per JS

[LX]

Hallo, Frederic!

Zuerst die gute Nachricht: Addieren funktioniert in JavaScript ziemlich genau wie in PHP: "wert1 + wert2" addiert beide Werte miteinander.

Diese Hürde wäre jetzt schon mal genommen. Jetzt kommt der schwierigere Part: die Ein- und Ausgabe. Da Du Dich im Client und nicht auf dem Server befindest, gelten hier ganz andere Konzepte. Eines davon (welches Dir noch viel Ärger ersparen wird) ist das DOM (Document Object Model), eine Art Baumstruktur, in welcher der Browser die jeweilige Seite darstellt. Dieses kennt bestimmte Methoden wie document.getElementsByName() und document.getElementById(), um einzelne HTML-Knoten zu selektieren. Dann brauchst Du von den Formularfeldern noch die node.value-Eigenschaft, in welcher der gegenwärtige Wert des Felds gelesen und geschrieben werden kann, die Funktion parseInt, um diesen Wert in eine Zahl zu wandeln, die Funktion isNaN, um zu prüfen, ob es sich tatsächlich um eine Zahl handelt, das onkeyup-Event, was eine Funktion dann ausführt, wenn eine Taste losgelassen wurde und last but not least die Eigenschaft node.innerHTML, um den Inhalt eines HTML-Knotens zu verändern - der Rest sind einfache Schleifen.

Wenn wir jetzt von der einfacheren Version ausgehen, dass Du lediglich dezimale Zahlenwerte aus feststehenden Feldern auslesen willst, kannst Du ungefähr folgendes Konstrukt verwenden:

  
<input type="text" name="wert1" />  
<input type="text" name="wert2" />  
<input type="text" name="wert3" />  
<p id="ergebnis">?</p>  
<script type="text/javascript">  
var werte = [ 'wert1', 'wert2', 'wert3' ], wert = 0, i = 0;  
while ((wert = werte[i++])) {  
    wert.onkeyup = function(){  
        var wert = 0, i = 0, summe = 0, additor = 0;  
        while ((wert = werte[i++])) {  
            additor = parseInt((document.getElementsByName(wert)[0]||{}).value, 10);  
            summe += isNaN(additor) ? 0 : additor;  
        }  
        document.getElementById('ergebnis').innerHTML = summe;  
    }  
}  
</script>

Gruß, LX