Prozentrechnung 2

So funktioniert das Script

Das Script hat drei Aufgaben: die beiden Eingabefelder auslesen, den Abzug ausrechnen und das Ergebnis ausgeben. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen nicht mit anderen Scripts auf der Seite in Konflikt geraten.

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

Die Hilfsfunktion zahl() holt ein Eingabefeld anhand seiner id und macht aus dem getippten Text eine Zahl. trim() entfernt versehentliche Leerzeichen, replace(",", ".") tauscht ein deutsches Dezimalkomma gegen den Punkt, den JavaScript intern erwartet. Ein leeres Feld liefert bewusst NaN („Not a Number") zurück — sonst würde Number("") stillschweigend zu 0 und das Script würde mit einem leeren Feld einfach weiterrechnen.

if (isNaN(preis) || isNaN(prozent)) {
  ausgabe.textContent = "Bitte tragt in beide Felder eine Zahl ein.";
  return;
}

Vor dem Rechnen werden beide Werte mit isNaN() geprüft. Steht in einem Feld keine gültige Zahl, erscheint ein Hinweis in der Ergebnisfläche und return bricht die Funktion ab. Das alte Original gab in so einem Fall NaN € aus — die freundliche Meldung ist der modernere Weg.

const zwischen = preis * prozent / 100;
const endpreis = preis - zwischen;

Das ist die komplette Prozentrechnung: zwischen ist der Prozentwert, also der Betrag, der dem Prozentsatz entspricht — Grundwert mal Prozentsatz, geteilt durch 100. Er wird vom Preis abgezogen, übrig bleibt der Endpreis. Bei den Beispielwerten: 100 × 25 ÷ 100 = 25, und 100 − 25 = 75.

ausgabe.innerHTML =
  prozent + "% von " + preis + " € macht einen Endpreis von <strong>" +
  endpreis.toFixed(2).replace(".", ",") + " €</strong>";

toFixed(2) rundet den Endpreis auf zwei Nachkommastellen — bei Preisen genau richtig, und es verhindert die krummen Fließkomma-Ergebnisse wie 7.500000000000001, die das Original gelegentlich anzeigte. Das anschließende replace macht aus dem Punkt wieder ein deutsches Komma. Weil die Ausgabe per innerHTML gesetzt wird, darf der Betrag in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("pz2-berechnen").addEventListener("click", rechne);

Zum Schluss wird rechne() per addEventListener("click", …) mit dem Knopf verbunden. Das Script steht dafür unter dem Formular — so existieren die Felder und der Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Aus dem Rabatt-Rechner wird mit einem einzigen Zeichen ein Aufschlag-Rechner — ersetzt in der Zeile preis - zwischen das Minus durch ein Plus, und das Script rechnet z. B. Mehrwertsteuer oder Trinkgeld auf den Preis drauf. Auch die Texte der Ausgabe und die vorausgefüllten Beispielwerte könnt ihr frei ändern.