Flächenberechnung / Trapez

So funktioniert das Script

Das Script hat drei Aufgaben: die drei Eingabefelder auslesen, die Trapezformel anwenden und das Ergebnis in die Ausgabefläche schreiben. Alles ist in eine sofort ausgeführte Funktion verpackt, damit die Variablennamen nicht mit anderen Scripts auf derselben Seite in Konflikt geraten.

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

Die Hilfsfunktion zahl() holt ein Eingabefeld anhand seiner id, liest den eingetippten Text aus und wandelt ihn mit Number() in eine Zahl um. Vorher tauscht replace(",", ".") ein deutsches Dezimalkomma gegen einen Punkt — JavaScript versteht intern nur die englische Schreibweise. So funktionieren Eingaben wie "4,5" genauso wie "4.5". Im alten Original wurde für denselben Zweck der Trick value * 1 benutzt, um den Text in eine Zahl zu zwingen; Number() macht das heute deutlich lesbarer.

const flaeche = 0.5 * (oben + unten) * hoehe;

Das ist die komplette Mathematik: die Trapezformel A = ½ · (a + c) · h, eins zu eins in JavaScript. Die Klammern um oben + unten sind wichtig — ohne sie würde wegen Punkt-vor-Strich-Rechnung erst multipliziert und dann addiert, und das Ergebnis wäre falsch.

if (isNaN(flaeche) || flaeche <= 0) {
  ausgabe.textContent = "Ungültige Eingabe — …";
  return;
}

Vor der Ausgabe wird das Ergebnis geprüft. isNaN() steht für „is Not a Number" und schlägt an, wenn in einem der Felder keine gültige Zahl stand — dann ist auch das Rechenergebnis keine Zahl. Zusätzlich wird ein Ergebnis von 0 oder weniger abgefangen, denn ein echtes Trapez hat immer eine positive Fläche. In beiden Fällen erscheint eine freundliche Meldung, und return beendet die Funktion, bevor Unsinn ausgegeben wird.

ausgabe.innerHTML =
  "Die Fläche des Trapezes beträgt <strong>" +
  String(flaeche).replace(".", ",") + " cm²</strong>.";

Die Ausgabe landet per innerHTML in der Ergebnisfläche — dadurch darf der Wert in <strong>-Tags stehen und wird hervorgehoben. String(flaeche) macht aus der Zahl wieder einen Text, und replace(".", ",") verwandelt den Dezimalpunkt zurück in ein deutsches Komma.

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

Zum Schluss wird die Funktion trapez() mit dem Knopf verbunden: addEventListener("click", …) führt sie bei jedem Klick aus. Das Script steht deshalb unter dem Formular — so existieren alle Felder bereits, wenn es geladen wird.

Zum Anpassen: Rechnet ihr lieber in Metern, müsst ihr nur die Beschriftungen im HTML und die Einheit " cm²" im Ausgabetext ändern — die Formel bleibt gleich. Und wer das Ergebnis runden möchte, ersetzt String(flaeche) durch flaeche.toFixed(2) für zwei Nachkommastellen.