Beträge addieren per JS

[Frederic]

Hallo zusammen,

ich habe ein kleines Problem:

Ein Kunde möchte in einem Eingabe-Formular bestimmte Beträge zusammengerechnet haben. Diese sollen in einem Bereich auf der Seite direkt ausgegeben werden ohne dass die Seite neu geladen werden muss, also sobald ich den Betrag eingegeben habe soll etwas weiter unten die Ausgabe erfolgen.

Ich habe leider gar keine Ahnung von JS (verstehe mich eher auf PHP) und frage daher, ob es eine einfache Möglichkeit gibt (evt. ein Tutorial oder etwas, woran ich mich orientieren kann) welches auch für mich umsetzbar wäre.

Besten dank schon mal

Frederic

[Georg]

Hallo zusammen,

Ich habe leider gar keine Ahnung von JS (verstehe mich eher auf PHP) und frage daher, ob es eine einfache Möglichkeit gibt (evt. ein Tutorial oder etwas, woran ich mich orientieren kann) welches auch für mich umsetzbar wäre.

Google ergab, oh wunder, andere hatten auch schonmal ähnliche fragen...:
http://forum.jswelt.de/javascript/31329-wert-textfeld-auslesen-berechnung-ausf-hren.html

[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

[Don P]

Hallo,

[...] kannst Du ungefähr folgendes Konstrukt verwenden:

Mit Betonung auf _ungefähr_ ;)

var werte = [ 'wert1', 'wert2', 'wert3' ], wert = 0, i = 0;

while ((wert = werte[i++])) {
    wert.onkeyup = function(){ // [...]

  
wert enthält jetzt jeweils einen String, und Strings lösen keine Eventhandler aus.  
Hab's zwar nicht getestet, würde mich aber sehr wundern, wenn das funktioniert. Denke, man muss schon die input-Elemente selber im Array haben, nicht nur ihre Namen als Strings.  
  
Aber das gefällt mir:  

> `while ((wert = werte[i++])) { /*[...]*/ }`{:.language-javascript}  

:)  
Das ist mal eine schöne Schleife statt der üblichen, scheusslich gesprächigen Variante  
`for(i=0, i < werte.length; i++){ wert=werte[i]; /*[...]*/ }`{:.language-javascript}  
  
Gruß, Don P  

[LX]

Hallo, Don P

Gemeint war natürlich document.getElementsByName(wert)[0].onkeyup = function(){ // [...]

Gruß, LX

[Vinzenz Mai]

Hallo,

Gemeint war natürlich document.getElementsByName(wert)[0].onkeyup = function(){ // [...]

was ich persönlich für keine besonders gute Idee halte.

onchange oder onblur hielte ich für geeignetere Ereignisse, die den Benutzer nicht mit höchst seltsamen Zwischenergebnissen irritieren.

Freundliche Grüße

Vinzenz

[JürgenB]

Hallo Vinzenz,

onchange oder onblur hielte ich für geeignetere Ereignisse, die den Benutzer nicht mit höchst seltsamen Zwischenergebnissen irritieren.

wobei onchange (onblur habe ich noch nicht benutzt) erst feuert, wenn das Eingabeelement den Focus verliert. Die Rechnung wird also erst durchgeführt, wenn der User "irgendwo" hin klickt. Auf meinen Rechenseiten (z.B. dem Stromrechner) hab ich daher einen OK-Button ohne weitere Funktion, um dem User nicht das "irgendwohin Klicken" erklären zu müssen.

Gruß, Jürgen

[Frederic]

Besten dank

werde ich mir mal anschauen...

Frederic