Flächenberechnung / Rechteck

So funktioniert das Script

Das Script besteht aus zwei Funktionen: einer kleinen Hilfsfunktion, die ein Eingabefeld als Zahl liest, und der eigentlichen Rechenfunktion, die multipliziert und das Ergebnis ausgibt. Beide stecken in einer sofort ausgeführten Funktion, damit ihre Namen nicht mit anderen Scripts auf derselben Seite kollidieren.

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

document.getElementById() sucht ein Element anhand seiner id heraus, .value liefert den eingetippten Text, und Number() macht daraus eine Zahl. Das replace(",", ".") dazwischen tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise — aus "7,5" wird so erst "7.5" und dann die Zahl 7,5. Der trim()-Aufruf entfernt versehentliche Leerzeichen, und ein leeres Feld liefert ausdrücklich NaN zurück — ohne diese Abfrage würde Number("") nämlich die Zahl 0 ergeben und das Script stillschweigend mit einer Null rechnen, die niemand eingetippt hat. Das Original verzichtete auf die Umwandlung und multiplizierte die Texte direkt; das funktioniert bei der Multiplikation zufällig, weil JavaScript dabei selbst umrechnet, aber bei einer Addition käme prompt Unsinn heraus.

if (isNaN(hoehe) || isNaN(breite) || hoehe <= 0 || breite <= 0) {
  ausgabe.textContent = "Ungültige Eingabe — bitte für Höhe und Breite je eine Zahl größer als 0 eintragen.";
  return;
}

Vor dem Rechnen wird geprüft. isNaN() steht für „is Not a Number" und schlägt an, wenn ein Feld leer ist oder Buchstaben enthält. Zusätzlich müssen beide Maße größer als 0 sein — ein Rechteck ohne Ausdehnung gibt es nicht. Die beiden senkrechten Striche || bedeuten „oder": Trifft auch nur eine der vier Bedingungen zu, erscheint der Hinweis, und return beendet die Funktion, bevor gerechnet wird. Das Original prüfte erst hinterher, ob das Ergebnis 0 war — was auf dasselbe hinausläuft, den Grund aber verschleiert.

const flaeche = hoehe * breite;

Das ist die ganze Mathematik des Scripts: die Formel Fläche = Höhe · Breite in einer Zeile. const legt dabei einen Wert an, der sich später nicht mehr ändern soll — bei einem Zwischenergebnis wie diesem ist das genau richtig und schützt vor versehentlichem Überschreiben.

ausgabe.innerHTML = "Die Fläche des Rechtecks beträgt <strong>" +
  flaeche.toLocaleString("de-DE", { maximumFractionDigits: 2 }) + " cm²</strong>";

toLocaleString("de-DE") schreibt die Zahl in deutscher Schreibweise: Komma statt Punkt, Tausenderpunkte bei großen Werten. maximumFractionDigits: 2 begrenzt die Nachkommastellen auf zwei. Weil die Ausgabe per innerHTML gesetzt wird, darf sie HTML enthalten und der Wert in <strong>-Tags hervorgehoben werden.

document.getElementById("fr-berechnen").addEventListener("click", rechteck);

Diese Zeile verbindet den Knopf mit der Funktion. Im Original stand dafür ein onclick-Attribut direkt im HTML, das der Funktion sogar das Formular mitgab (rechteck(this.form)) — gebraucht wurde es nie. Heute trennt man Markup und Verhalten: Das Script hängt sich mit addEventListener selbst an den Knopf und steht deshalb unter dem Formular, damit der Knopf beim Ausführen schon existiert.

Zum Anpassen: Für andere Einheiten ändert ihr die Beschriftungen im HTML und die Zeichenkette " cm²" in der Ausgabe. Wollt ihr statt der Fläche den Umfang berechnen, ersetzt ihr die Rechenzeile durch const flaeche = 2 * (hoehe + breite); und passt den Ausgabetext an.