JavaScripts › Mathematik

Prozentrechnung

Berechnet aus zwei Zahlen ihr prozentuales Verhältnis: 20 von 87 sind 22,98 Prozent.

Dieses Script berechnet aus zwei gegebenen Zahlen das prozentuale Verhältnis zueinander. Es beantwortet also die Frage „Wie viel Prozent sind X von Y?“ — etwa, welchen Anteil 20 richtige Antworten an 87 Fragen ausmachen, wie viel Prozent einer Strecke ihr schon geschafft habt oder welchen Anteil ein einzelner Posten an einer Gesamtsumme hat.

Zur Bedienung: Ins erste Feld kommt der Teil, ins zweite das Ganze, dann ein Klick auf „berechnen“ — darunter steht das Ergebnis als vollständiger Satz. Die Beispielwerte 20 und 87 sind bereits eingetragen. Nachkommastellen dürft ihr wahlweise mit Komma oder mit Punkt eingeben, und das Ergebnis wird auf zwei Nachkommastellen gekürzt.

Zum Rechenweg: Prozent heißt wörtlich „von hundert“, ein Prozentwert ist also nichts anderes als ein Bruch mit dem Nenner 100. Die Rechnung dahinter ist entsprechend einfach — Teil geteilt durch Ganzes, mal 100. Wichtig ist nur die Reihenfolge: Steht die größere Zahl im ersten Feld, kommt folgerichtig ein Wert über 100 Prozent heraus, denn dann ist der „Teil“ größer als das „Ganze“.

Ein weiteres Javascript zur Prozentrechnung gibt es hier; es rechnet in mehrere Richtungen. Wer noch mehr Auswahl möchte, findet mit dem Prozentrechner 3 eine dritte Variante. Und wenn ihr statt eines Anteils eine proportionale Zuordnung braucht — „wenn 10 Stück 23 € kosten, was kosten dann 12?“ —, ist der Dreisatz das passende Werkzeug.

Mathematik Baujahr 2004 läuft in deinem Browser

So funktioniert das Script

Das Script hat drei Aufgaben: die beiden Felder auslesen, die Prozentrechnung ausführen und das Ergebnis als Satz ausgeben. Dazwischen liegt noch eine Prüfung der Eingaben. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen darin keine anderen Scripts auf derselben Seite stören.

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

Diese Hilfsfunktion holt sich ein Eingabefeld über seine id und macht aus dem eingetippten Text mit Number() eine echte Zahl. Der Austausch von Komma gegen Punkt davor ist nötig, weil JavaScript intern nur die englische Schreibweise versteht: Aus "12,5" wird erst "12.5" und daraus die Zahl 12,5. Das Original rechnete ohne diesen Schritt direkt mit dem Text weiter — das funktioniert bei ganzen Zahlen, geht aber bei einem Komma schief.

if (roh1 === "" || roh2 === "" || isNaN(z1) || isNaN(z2)) {
  ausgabe.textContent = "Bitte tragt in beide Felder eine Zahl ein.";
  return;
}

Geprüft wird auf zwei Arten von Fehlern. isNaN() erkennt Buchstaben und andere Nicht-Zahlen. Zusätzlich müssen die Rohtexte auf Leere geprüft werden, denn ein leeres Feld macht Number() stillschweigend zur 0 — ohne diese Prüfung käme also „0 von 0“ heraus statt eines Hinweises. Direkt danach fängt eine zweite Bedingung den Fall ab, dass im zweiten Feld eine 0 steht: Eine Division durch null ergibt in JavaScript Infinity, und das wäre eine wenig hilfreiche Antwort.

const pr = (z1 / z2) * 100;

Das ist die gesamte Prozentrechnung. Der Teil wird durch das Ganze geteilt — das ergibt den Anteil als Dezimalzahl, bei 20 von 87 also rund 0,2299 — und die Multiplikation mit 100 macht daraus den Prozentwert 22,988… Die Klammern sind hier nur der Deutlichkeit halber gesetzt; Punktrechnung wird ohnehin von links nach rechts abgearbeitet.

const gekuerzt = Math.trunc(pr * 100) / 100;

Hier wird auf zwei Nachkommastellen gekürzt, und zwar bewusst durch Abschneiden statt durch Runden — genau wie im Original, das dafür allerdings einen recht verschlungenen Weg über substr und die Suche nach dem Punkt in der Zeichenkette nahm. Math.trunc() schneidet alle Nachkommastellen ab; multipliziert man vorher mit 100 und teilt hinterher wieder durch 100, bleiben genau zwei Stellen übrig. Aus 22,988505… wird so 22,98. Nebenbei behebt das einen Fehler des Originals: Kam ein glattes Ergebnis ohne Nachkommastellen heraus, schnitt der alte Code die Zahl an der falschen Stelle ab und machte aus 100 Prozent die Anzeige „10“.

ausgabe.innerHTML =
  z1.toLocaleString("de-DE") + " von " + z2.toLocaleString("de-DE") +
  " sind <strong>" + gekuerzt.toLocaleString("de-DE") + " Prozent</strong>";

toLocaleString("de-DE") schreibt jede Zahl in deutscher Schreibweise mit Komma als Dezimaltrenner. Das Ergebnis erscheint als vollständiger Satz in der Ausgabefläche — das Original zeigte ihn in einem alert()-Fenster, das man erst wegklicken musste. Weil hier innerHTML benutzt wird, darf der Prozentwert in <strong>-Tags stehen und wird hervorgehoben.

Zum Anpassen: Wollt ihr lieber runden statt abschneiden, ersetzt Math.trunc durch Math.round — aus 22,98 wird dann 22,99. Mehr Nachkommastellen bekommt ihr, indem ihr beide Hundert durch Tausend ersetzt. Und wer das Ergebnis schon beim Tippen sehen möchte, hängt zusätzlich zum Klick noch addEventListener("input", berechnen) an die beiden Eingabefelder.

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