Einfacher Euro-Rechner

So funktioniert das Script

Das Script ist eines der kürzesten in unserer Sammlung und deshalb ein guter Einstieg: Es besteht aus zwei Einstellungen ganz oben, einer Funktion, die rechnet, und einer Zeile, die diese Funktion mit dem Eingabefeld verbindet. Alles zusammen steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf derselben Seite kollidieren.

const waehrung_name = "CHF";
const waehrung_kurs = 0.9375; // Dezimalzahlen mit Punkt trennen, nicht mit Komma!

Diese beiden Zeilen sind der ganze Einstellbereich. waehrung_name ist reine Beschriftung — der Text erscheint über dem rechten Feld und im Ergebnissatz. waehrung_kurs ist die Zahl, mit der multipliziert wird. Der Kommentar dahinter ist ernst gemeint: Im JavaScript-Quelltext müssen Nachkommastellen immer mit Punkt geschrieben werden, ein Komma würde JavaScript als Trennzeichen zwischen zwei Werten deuten und die Zahl zerreißen. Ein const ist übrigens eine Variable, deren Wert sich während des Laufs nicht mehr ändert — genau richtig für Einstellungen.

const betrag = Number(euro.value.replace(",", "."));

Was in einem Eingabefeld steht, ist für JavaScript zunächst immer Text, auch wenn es wie eine Zahl aussieht. Number() macht daraus eine echte Zahl, mit der man rechnen kann. Das replace(",", ".") davor erlaubt euch, „12,50“ einzutippen — im Feld darf also das deutsche Komma stehen, intern wird daraus der englische Punkt. Das Original verzichtete darauf und multiplizierte den Text direkt mit dem Kurs; bei einem Komma kam dabei NaN heraus.

const x = betrag * waehrung_kurs;
const gerundet = Math.round(x * 100) / 100;

Die eigentliche Umrechnung ist eine einzige Multiplikation. Die zweite Zeile ist der klassische Rundungstrick: Math.round() kann nur auf ganze Zahlen runden, also wird der Wert erst mit 100 multipliziert, dann gerundet und anschließend wieder durch 100 geteilt — übrig bleiben zwei Nachkommastellen. Aus 147,350644 wird so 147,35. Wollt ihr auf drei Stellen runden, ersetzt ihr beide Hundert durch Tausend.

gerundet.toLocaleString("de-DE", { minimumFractionDigits: 2, maximumFractionDigits: 2 })

toLocaleString("de-DE") schreibt die Zahl in deutscher Schreibweise: Komma als Dezimaltrenner, Punkt als Tausendertrenner. Mit den beiden Angaben zu den Nachkommastellen werden immer genau zwei angezeigt — sonst würde aus einem glatten Betrag „150“ statt des bei Geld üblichen „150,00“.

euro.addEventListener("input", convert);
convert();

Das input-Ereignis feuert bei jeder Änderung des Feldes, also schon während des Tippens — deshalb steht das Ergebnis sofort da, ohne dass es einen Knopf braucht. Das Original benutzte dafür onkeyup; input ist der modernere Nachfolger und erfasst auch eingefügten Text aus der Zwischenablage. Der zweite Aufruf convert() ganz ohne Ereignis sorgt dafür, dass der vorbelegte Betrag schon beim Laden der Seite umgerechnet ist.

Zum Anpassen: Neben Name und Kurs lässt sich vor allem die Richtung umdrehen — wollt ihr von der Fremdwährung nach Euro rechnen, teilt ihr statt zu multiplizieren (betrag / waehrung_kurs) und tauscht die Beschriftungen. Und wer mehrere Währungen auf einer Seite braucht, baut das Script einfach mehrmals ein, muss dann aber in jedem Exemplar die drei id-Namen curr_euro, curr_foreign und curr_marke eindeutig machen, etwa als curr_euro2.