Karsten Spin: Kommazahlen in Javascript und Bildschirmausgabe

Beitrag lesen

Hallo kastbgjh!

Ich arbeite persönlich mit PHP, MySQL , HTML und JavaScript, so dass mein Beitrag darauf basiert (aber dennoch allgemein gültig ist). Meine Antwort auf deine Frage baue ich hier zunächst grundlegend auf , beziehe mich jedoch ausführlich innerhalb meiner Antwort auf dein Problem und hoffe, dass dir so jetzt und für deine zukünftigen Projekte etwas weitergeholfen ist.

Wenn du mit Daten bzw. Preisen, wie ich in deinem Fall vermute, z.B. aus Datenbanken in JavaScript (JScript) Berechnungen ausführen willst, dann musst du diese Werte zunächst an JScript übergeben. Wenn du z.B. den Wert einer PHP-Variabel an JScript übergeben willst, dann sieht dieser Befehl wie folgt in JScript aus:

var JScriptVariabel = '$phpVariabel';

Anders ist dies bei aktiven Veränderungen des Variabelenwerts durch den User über ein HTML-Formelement (z.B. Button oder Input). Hier arbeitet man am besten mit Event-Handlern wie onClick oder onChange, die dann eine JScript-Funktion aufrufen:

<INPUT type='text' maxlength='10' name='preis' value='$phpVariable'  onChange='neuerPreis(this.form, 0)'>

Die entsprechende JScript-Funktion erhält also die Inhalte der HTML-Formelemente bzw. des aktiven Formulars und muss daher eine Übergabevariabel hierfür aufweisen in meinem Beispiel lautet diese 'formElement'. Ferner sollte man der Funktion noch mitteilen, welchen Index das zu bearbeitende bzw. zu aktualisierende Formelement trägt (z.B. 0)  die Funktion benötigt also auch hierfür eine Übergabevariabel, im Beispiel ist dies 'b'. Die JScript-Funktionsdeklarierung sieht daher wie folgt aus:

function neuerPreis(formElement, b)  // Funktionsdeklaration mit Übergabevariabeln
 {
     var preis = formElement[b].value;      // belege JscriptVariabel mit Wert des Formelement mit dem Index b

(... Berechnung neuer Ausgabewerte ...)
 }

Ist die Übergabe des Variabeleninhalte an JScript so erfolgt, hat man es mit einem anderen Problem zu tun: JScript arbeitet nur mit Kommazahlen (sog. Floats), worin als Komma der Punkt verwendet wird. Bei allen anderen Kommata werden die Werte der Variable als String interpretiert und es kann somit nicht mit ihnen gerechnet werden. Der Interpreter gibt dann die Fehlermeldung NaN (Not a Number) aus. Also, wie bekomme ich z.B. ein Komma aus dem Ausdruck heraus? Man verwendet die JScript-Methode replace(). Das sieht dann im Code etwa so aus:

preis = preis.replace(/[,]/,'.');  // ersetze Komma mit Punkt

In den eckigen Klammern steht dabei das, was ersetzt wird und in den Anführungszeichen das wodurch es ersetzt werden soll. Näheres dazu findet man unter dem Thema Reguläre Ausdrücke (RegExp).

Jetzt sollte man den Variabeleninhalt noch nach Float konvertieren  dies sollte man machen, da zwischenzeitlich der Wert der Variable als String durch den Interpreter festgesetzt worden sein könnte. Bei einer Berechnung, die man dann mit diesem Wert ausführt, würde man also wieder die Fehlermeldung NaN (Not a Number) erhalten (näheres zu Konvertierungs-Methoden unter dem Thema Objektunabhängige Funktionen). Also konvertiere den Variabeleninhalt nach Float mit der Methode bzw. Funktion parseFloat():

preis = parseFloat(preis);  // konvertiere zu Float

Jetzt kannst du deine Berechnungen problemlos anstellen. Bleibt nur noch das Problem mit dem Runden  denn wer hat schon gerne einen Ergebniswert mit einer endlosen Nachkommazahl?! Dies ist im Prinzip auch sehr simpel. Wie bereits erwähnt stellt Float eine Nachkommazahl für JScript (und auch in anderen Programmier- bzw. Skriptsprachen) dar. Anders ist dies bei Integer - Integer ist die Bezeichnung für ganze Zahlen (also eine Zahl ohne Nachkommastelle). Konvertiert man nun einen Float nach Integer (parseInt()), so werden alle Nachkommastellen samt Komma bzw. Punkt von dem Wert abgeschnitten.

Um einen Wert z.B. auf 2 Nachkommastellen zu runden, geht man daher z.B. wie folgt vor:

wert = wert * 100;  // erhoehe wert um Faktor 100 (ergibt spaeter 2 Nachkommastellen)
  wert = parseInt(wert);  // schneide die ueberfluessigen Kommastellen ab (konvertiere von Float nach Integer)
  wert = parseFloat(wert); // lasse Kommastellen wieder zu (konvertiere von Integer nach Float)
  wert = wert / 100;  // verringere Variable wert um Divident 100 (generiere 2 Nachkommastellen)

Nun wolltest du wohl den neuen Inhalt deiner JScript-Variabel auf dem Bildschirm ausgeben  jedoch bestimmt nicht als einen Wert mit einem Punkt als Komma. Also muss man wieder etwas an dem Ausdruck verändern d.h. suche wieder nach einem regulären Ausdruck (in unserem Fall ist dies jetzt der Punkt) und ersetze diesen durch das Komma. Zuvor sollte man jedoch noch den Float-Zahlenwert der Variable in einen String verwandeln:

wert = String(wert);  // konvertiere nach String
  wert = wert.replace(/[.]/,','); // ersetze eventuellen Punkt mit Komma

Dies war der letzte Arbeitschritt bzw. vorletzte. Als nächstes muss dein neuer Wert noch auf dem Bildschirm für den User ausgegeben werden, das HTML-Formelement also mit dem neuen Wert belegt bzw. aktualisiert werden:

formElement[b].value = wert;  // weise wert dem Formelement mit dem Index b zu

Nun ist eigentlich alles erledigt - es könnte jedoch stören, dass Nullen, die auf den letzten Nachkommastellen liegen durch den Interpreter einfach abgeschnitten werden; man also Werte ausgegeben bekommt, die nicht in die Formatierung bzw. dem Design des User-Bildschirms passen wie z.B. 12,3 oder 12 anstelle von 12,30 oder 12,00. Um dieses zu ändern habe ich dir hier noch einen meiner kleinen Algorhythmen angehängt:

var z = 0;   // deklariere ZaehlerVariable

for (i=0; i < wert.length; i++)  // parse wert
 {
  nachKomma = wert.charAt(i); // belege Variable mit StellenWert an ParserPosition i

if (nachKomma == ',' || z != 0) // wenn Komma gefunden oder Zaehler nicht Null, dann ...
  {
   z++;    // erhoehe Zaehlervariable um eins
  }
 }

/* Im folgenden wird der Endwert fuer die Bildschirmausgabe modelliert - er wird gegebenenfalls um Nullen ergaenzt. */

if (z == 0)    // es existieren keine NachkommaStellen (durch Interpreter abgeschnitten)
 {
     formElement[b].value = wert+',00'; // erweiter wert um Komma und zwei Nullen und weise dem Formelement mit dem Index b zu
 }
 else if (z == 2)   // es existiert eine NachkommaStelle
 {
    formElement[b].value = wert+0; // erweiter wert um eine Null und weise diesem dem Formelement mit dem Index b zu
 }
 else if (z == 3)   // es existieren zwei NachkommaStellen
 {
    formElement[b].value = wert; // wert ohne Erweiterung dem Formelement mit dem Index b zuweisen
 }

So, das wars! Hoffentlich kann man mit meiner Antwort auf deine Frage etwas anfangen.

Mit freundlichen Grüßen,
Karsten Spin