JavaScripts › Mathematik

Dreisatz

Rechnet eine proportionale Zuordnung aus: Wenn 10 Flaschen 23 € kosten — was kosten dann 12?

Der Dreisatz ist das wohl meistgebrauchte Rechenverfahren des Alltags: Aus drei bekannten Werten wird ein vierter berechnet. Das klassische Beispiel ist der Einkauf — wenn 10 Flaschen 23 € kosten, was kosten dann 12 Flaschen? Genau diese Frage beantwortet euch dieses Script, das unser User rapelmshorn eingeschickt hat.

Es handelt sich um den geraden (proportionalen) Dreisatz: Je mehr Stück, desto höher der Preis, und zwar im gleichen Verhältnis. Tragt in die beiden oberen Felder die bekannte Anzahl und die neue Anzahl ein, darunter den bekannten Preis — ein Klick auf „Berechnen" liefert den neuen Preis. Das Flaschen-Beispiel ist bereits vorausgefüllt, ihr könnt also sofort ausprobieren, wie es funktioniert.

Das Script ist auf Preisberechnungen ausgelegt: Das Ergebnis wird immer auf zwei Nachkommastellen gerundet, und beim Preis dürft ihr Nachkommastellen wahlweise mit Komma oder Punkt eingeben.

Für Zuordnungen, bei denen mehr vom einen weniger vom anderen bedeutet (etwa: mehr Arbeiter, weniger Bauzeit), haben wir auch ein Script für den antiproportionalen Dreisatz im Archiv. Wer nur Prozentwerte braucht, wird bei der Prozentrechnung fündig.

Mathematik Baujahr 2007 läuft in deinem Browser
Eingesandt von rapelmshorn

So funktioniert das Script

Das Script besteht aus drei Teilen: Es liest die drei Eingabefelder aus, rechnet den Dreisatz und schreibt das Ergebnis in die Ausgabefläche. Alles steckt in einer sofort ausgeführten Funktion, damit keine Variablennamen mit anderen Scripts auf der Seite kollidieren.

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

Die Hilfsfunktion zahl() holt sich ein Eingabefeld anhand seiner id, liest den eingetippten Text aus und macht daraus mit Number() eine Zahl. Der Trick davor: replace(",", ".") tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise — aus "22,50" wird so erst "22.50" und dann die Zahl 22.5.

if (!anzahlAlt || isNaN(anzahlNeu) || isNaN(preis)) {
  ausgabe.textContent = "Bitte tragt in alle drei Felder eine Zahl ein.";
  return;
}

Bevor gerechnet wird, prüft das Script die Eingaben. isNaN() steht für „is Not a Number" und erkennt, wenn in einem Feld keine gültige Zahl steht. Die alte Anzahl wird zusätzlich mit !anzahlAlt geprüft — sie darf nicht 0 sein, weil durch sie geteilt wird und eine Division durch null kein sinnvolles Ergebnis liefert. Im Fehlerfall erscheint ein Hinweis und return beendet die Funktion, ohne weiterzurechnen.

const preisNeu = (anzahlNeu * preis) / anzahlAlt;

Das ist der eigentliche Dreisatz in einer Zeile. Klassisch rechnet man in zwei Schritten: erst den Preis für 1 Stück (preis / anzahlAlt, also 23 € ÷ 10 = 2,30 €), dann mal die neue Anzahl (2,30 € × 12 = 27,60 €). Mathematisch ist das dasselbe wie die eine Zeile oben — nur die Reihenfolge der Rechenschritte ist getauscht.

ausgabe.innerHTML =
  anzahlNeu + " Stück kosten <strong>" +
  preisNeu.toFixed(2).replace(".", ",") + " €</strong>";

toFixed(2) rundet auf zwei Nachkommastellen — bei Preisen genau richtig — und das anschließende replace macht aus dem Punkt wieder ein deutsches Komma. Weil das Ergebnis per innerHTML gesetzt wird, darf der Betrag in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("ds-berechnen").addEventListener("click", rechnen);

Zum Schluss wird die Funktion rechnen() mit dem Knopf verbunden: addEventListener("click", …) sorgt dafür, dass sie bei jedem Klick läuft. Das Script steht dafür unter dem Formular — so existieren Knopf und Felder bereits, wenn es ausgeführt wird.

Zum Anpassen: Wenn ihr statt Preisen z. B. Gewichte oder Zeiten berechnen wollt, müsst ihr nur die Beschriftungen im HTML und die Einheit " €" im Ausgabetext ändern — die Rechnung bleibt dieselbe. Mehr Nachkommastellen bekommt ihr über die Zahl in toFixed(2).

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