JavaScripts › Mathematik

Kubikberechnung

Berechnet das Volumen eines Quaders aus Länge, Breite und Höhe in Metern.

Wer in der Schule aufgepasst hat, weiß, dass jeder Körper ein bestimmtes Volumen besitzt. Das Volumen eines Quaders wird von diesem Javascript ausgerechnet, das unser User „Potterfans“ eingeschickt hat. Die Formel dahinter ist die einfachste der ganzen Volumenrechnung: Länge mal Breite mal Höhe.

Gebt einfach die drei Kantenlängen in Metern in die entsprechenden Felder ein und klickt auf „Berechnen“ — das Script rechnet die Angaben zusammen und zeigt das Volumen in Kubikmetern (m³) an. Nachkommastellen dürft ihr wahlweise mit Komma oder Punkt eingeben.

Praktisch ist so eine Rechnung öfter, als man denkt: beim Ausmessen eines Raums, beim Abschätzen, wie viel Erde ins Hochbeet passt, oder wie viel Wasser ein rechteckiges Becken fasst. Ein Kubikmeter entspricht dabei übrigens genau 1000 Litern.

Wenn ihr ein fertiges Volumen zwischen Einheiten wie Litern und Kubikmetern umrechnen wollt, schaut euch auch unseren Volumenrechner an. Flächen statt Körper berechnet z. B. die Flächenberechnung / Rechteck.

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

So funktioniert das Script

Das Script hat drei Aufgaben: die drei Eingabefelder auslesen, die Kantenlängen multiplizieren und das Ergebnis in die Ausgabefläche schreiben. Alles steckt in einer sofort ausgeführten Funktion, damit keine Variablennamen mit anderen Scripts auf der Seite kollidieren.

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

Die Hilfsfunktion zahl() holt sich ein Eingabefeld anhand seiner id und liest den eingetippten Text aus. replace(",", ".") tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise. Ein leeres Feld wird bewusst zu NaN („Not a Number“) gemacht — Number("") würde sonst 0 liefern, und ein vergessenes Feld sähe wie eine echte Eingabe aus. Alles andere macht Number() zur Zahl.

if (isNaN(laenge) || isNaN(breite) || isNaN(hoehe)) {
  ausgabe.textContent = "Bitte tragt in alle drei Felder eine Zahl ein.";
  return;
}

Bevor gerechnet wird, prüft isNaN() für jedes der drei Felder, ob dort eine gültige Zahl steht. Die senkrechten Striche || bedeuten „oder“ — sobald auch nur ein Feld leer oder unlesbar ist, erscheint ein freundlicher Hinweis und return beendet die Funktion, ohne weiterzurechnen.

const volumen = laenge * breite * hoehe;

Die eigentliche Mathematik ist eine einzige Zeile: Das Volumen eines Quaders ist das Produkt seiner drei Kantenlängen. Bei einem Würfel sind alle drei gleich — dann könnt ihr dreimal denselben Wert eintragen.

ausgabe.innerHTML =
  laenge.toLocaleString("de-DE") + " m × " +
  breite.toLocaleString("de-DE") + " m × " +
  hoehe.toLocaleString("de-DE") + " m ergibt <strong>" +
  volumen.toLocaleString("de-DE") + " m³</strong>";

Für die Ausgabe wird die komplette Rechnung noch einmal hingeschrieben, so wie es schon das Original tat. toLocaleString("de-DE") formatiert jede Zahl in deutscher Schreibweise — mit Dezimalkomma und bei großen Werten mit Tausenderpunkten. Das erspart auch die krummen Nachkommastellen, die bei der Kommazahl-Multiplikation am Computer sonst manchmal auftauchen. Weil das Ergebnis per innerHTML gesetzt wird, darf das Volumen in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("kubik-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 Felder und Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Wollt ihr in Zentimetern statt Metern rechnen, müsst ihr nur die Beschriftungen im HTML und die Einheiten " m" und " m³" im Ausgabetext ändern — die Rechnung bleibt dieselbe. Und wer die Wiederholung der Eingaben nicht mag, kürzt den Ausgabetext einfach auf "Das Volumen beträgt …".

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