JavaScripts › Mathematik

Prozentrechner 3

Rechnet in beide Richtungen: Wie viel sind 19 % von 250 — und umgekehrt, wie viel Prozent von 200 sind 25?

Und noch ein Prozentrechner, diesmal von unserem User computerjan. Im Gegensatz zu den beiden Prozentrechnern, die sich schon im Archiv befinden, rechnet dieser hier in beide Richtungen — „vorwärts" und „rückwärts", wie computerjan es nennt.

Die obere Zeile beantwortet die Frage „Was sind x Prozent von y?": Ihr tragt links den Prozentsatz ein, rechts den Grundwert, und ein Klick auf „Ausrechnen" liefert den Prozentwert. Voreingestellt sind 19 Prozent von 250 — die alte Mehrwertsteuerfrage. Die untere Zeile geht den umgekehrten Weg: Ihr tragt zwei Beträge ein und erfahrt, wie viel Prozent der eine vom anderen ausmacht. „Zurücksetzen" stellt beide Zeilen wieder auf die Ausgangswerte.

Hinter beiden Rechnungen steckt dieselbe kleine Formel, nur nach unterschiedlichen Größen aufgelöst. In der Prozentrechnung heißen die drei Beteiligten Grundwert (das Ganze, 100 %), Prozentsatz (die Angabe mit dem %-Zeichen) und Prozentwert (der Anteil). Kennt ihr zwei davon, ergibt sich der dritte: Prozentwert = Grundwert × Prozentsatz ÷ 100. Die obere Zeile rechnet den Prozentwert aus, die untere den Prozentsatz.

Eine Warnung, die im Alltag oft untergeht: Prozentangaben lassen sich nicht einfach addieren. 20 Prozent Rabatt und danach noch einmal 10 Prozent ergeben zusammen keine 30, sondern 28 Prozent Nachlass, weil sich der zweite Abschlag auf den bereits verringerten Preis bezieht. Der zweite Grundwert ist eben ein anderer als der erste.

Die älteren Geschwister dieses Scripts sind die Prozentrechnung und die Prozentrechnung 2. Für proportionale Zuordnungen aller Art gibt es den Dreisatz.

Mathematik Baujahr 2008 läuft in deinem Browser
Eingesandt von computerjan

So funktioniert das Script

Das Script besteht aus zwei Rechenfunktionen — perc1() für die Frage nach dem Prozentwert, perc2() für die Frage nach dem Prozentsatz — sowie zwei Hilfsfunktionen, die das Auslesen der Felder und das Formatieren der Ausgabe übernehmen. Beide Rechnungen sind Einzeiler; der meiste Code kümmert sich darum, dass Eingabe und Ausgabe sauber aussehen.

function zahl(id) {
  const text = document.getElementById(id).value.trim().replace(",", ".");
  return text === "" ? NaN : Number(text);
}

Diese Hilfsfunktion holt ein Eingabefeld über seine id, entfernt mit trim() versehentliche Leerzeichen und tauscht ein deutsches Dezimalkomma gegen einen Punkt — Number() versteht nämlich nur die englische Schreibweise. Die Zeile mit dem Fragezeichen ist ein bedingter Ausdruck und die Kurzform eines if: Ist das Feld leer, kommt NaN zurück, sonst die Zahl. Das ist wichtig, denn Number("") ergäbe sonst eine 0, und ein leeres Feld sähe aus wie eine eingetragene Null.

const prozentwert = (prozentsatz / 100) * grundwert;

Das ist die erste Rechnung. Ein Prozent ist ein Hundertstel — deshalb wird der Prozentsatz zuerst durch 100 geteilt und damit in einen Faktor verwandelt: Aus 19 Prozent wird 0,19. Dieser Faktor mal dem Grundwert ergibt den Anteil, also 0,19 × 250 = 47,5.

const prozentsatz = (teilwert / grundwert) * 100;

Die zweite Rechnung dreht das um. Teilwert geteilt durch Grundwert liefert den Anteil als Bruchzahl — 25 ÷ 200 = 0,125 —, und die Multiplikation mit 100 macht daraus wieder eine Prozentangabe: 12,5 %. Damit hier nichts schiefgeht, prüft das Script vorher, ob der Grundwert 0 ist; eine Division durch null ergibt in JavaScript Infinity und wäre als Ergebnis wenig hilfreich.

function formatiere(wert) {
  return wert.toLocaleString("de-DE", { maximumFractionDigits: 6 });
}

toLocaleString("de-DE") schreibt eine Zahl so, wie man sie hierzulande schreibt: Komma als Dezimaltrennzeichen, Punkt als Tausenderpunkt. Die Angabe maximumFractionDigits: 6 begrenzt die Nachkommastellen auf sechs und räumt nebenbei die typischen Rechenreste auf, die beim Umgang mit Kommazahlen im Computer entstehen — ohne diese Bremse stünde bei manchen Eingaben etwas wie 47,500000000000004 da. Wollt ihr immer auf Cent-Genauigkeit runden, setzt ihr stattdessen { minimumFractionDigits: 2, maximumFractionDigits: 2 } ein.

document.getElementById("pr3-rechnen-1").addEventListener("click", perc1);
document.getElementById("pr3-rechnen-2").addEventListener("click", perc2);

Am Ende bekommt jeder der beiden Knöpfe seine Funktion zugewiesen. addEventListener("click", …) ist die heute übliche Art, auf Klicks zu reagieren; früher schrieb man dafür ein onclick-Attribut direkt ins HTML. Der neue Weg hat den Vorteil, dass Aussehen und Verhalten der Seite sauber getrennt bleiben. Wichtig ist nur, dass das <script> unter den Feldern steht — sonst gäbe es die Knöpfe zum Zeitpunkt der Zuweisung noch gar nicht.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Mathematik