Handyrechner

So funktioniert das Script

Das Script besteht aus zwei Hilfsfunktionen und einer Rechenfunktion: Die eine holt eine Zahl aus einem Eingabefeld, die andere macht aus einer Zahl einen Eurobetrag, und die dritte setzt beides zusammen und schreibt das Ergebnis in die Seite. Alles steckt in einer sofort ausgeführten Funktion, damit keine Namen mit anderen Scripts der Seite kollidieren.

function zahl(id) {
  return Number(document.getElementById(id).value.replace(",", "."));
}

Ein Eingabefeld liefert immer Text, nie eine Zahl — auch dann, wenn nur Ziffern darin stehen. Number() macht aus dem Text eine echte Zahl, mit der man rechnen kann. Der replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise. Aus "0,16" wird also erst "0.16" und daraus die Zahl 0.16. Genau das war in der Fassung von 2008 noch nicht drin — deshalb stand dort der Hinweis, man dürfe kein Komma benutzen.

function euro(betrag) {
  return betrag.toFixed(2).replace(".", ",") + " €";
}

toFixed(2) schreibt eine Zahl mit genau zwei Nachkommastellen, aus 0.8 wird also "0.80" — bei Geldbeträgen genau richtig. Anschließend geht es umgekehrt zurück: Der Punkt wird wieder zum Komma, und die Währung kommt hinten dran.

ausgabeSms.textContent = euro(Math.round(kostenSms * anzahlSms * 100) / 100);

Das ist die eigentliche Rechnung, und der Umweg über die 100 ist ein alter Trick: Multipliziert man den Betrag erst mit 100, rundet ihn mit Math.round() auf eine ganze Zahl und teilt anschließend wieder durch 100, dann ist auf volle Cent gerundet. Nötig ist das, weil Computer Kommazahlen nur näherungsweise speichern — ohne Rundung käme bei manchen Preisen ein Ergebnis wie 0.8000000000000001 heraus.

if (isNaN(kostenSms) || isNaN(anzahlSms) || isNaN(kostenMin) || isNaN(anzahlMin)) {
  ausgabeSms.textContent = "Bitte nur Zahlen eintragen.";
  ausgabeMin.textContent = "Bitte nur Zahlen eintragen.";
  return;
}

Vor der Rechnung prüft das Script alle vier Felder. isNaN() steht für „is Not a Number“ und ist wahr, sobald in einem Feld etwas steht, das sich nicht in eine Zahl verwandeln lässt. In diesem Fall erscheint ein freundlicher Hinweis, und return beendet die Funktion sofort — so bekommt niemand ein rätselhaftes NaN als Rechnungsbetrag zu sehen.

document.getElementById("hr-berechnen").addEventListener("click", handykostenBerechnen);

Zum Schluss wird die Rechenfunktion mit dem Knopf verbunden. addEventListener("click", …) ersetzt das onclick-Attribut aus dem Original: Das Verhalten steht damit im Script statt im HTML, was das Markup sauber hält. Damit die Elemente beim Verbinden schon existieren, steht das Script unter dem Formular.

Zum Anpassen: Für andere Einheiten müsst ihr nur die Beschriftungen im HTML und das Wort " €" in der Funktion euro() tauschen — die Rechnung „Preis mal Menge“ passt genauso auf Kopien, Portokosten oder Druckseiten. Wollt ihr zusätzlich die Gesamtsumme anzeigen, legt ein drittes Ausgabefeld an und addiert die beiden Beträge, bevor ihr sie durch euro() schickt.