BMI berechnen

So funktioniert das Script

Das Script hat vier Abschnitte: eine kleine Hilfsfunktion zum Auslesen der Felder, eine Funktion, die zu einem BMI den passenden Kommentartext liefert, die eigentliche Rechenfunktion mit ihrer Plausibilitätsprüfung und ganz am Ende die Verbindung zum Knopf. Alles liegt in einer sofort ausgeführten Funktion, damit die Namen nicht mit anderen Scripts auf der Seite kollidieren.

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

Diese Hilfsfunktion holt sich ein Eingabefeld über seine id, liest den eingetippten Text aus und macht daraus mit Number() eine Zahl. Das replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt — JavaScript versteht intern nur die englische Schreibweise. So darf man 1,75 genauso eintippen wie 1.75. Weil zwei Felder auszulesen sind, spart die Funktion die Zeile ein zweites Mal zu schreiben.

if (isNaN(groesse) || groesse < 50 || groesse > 250) {
  ausgabe.textContent = "Bitte tragt eine Größe zwischen 50 und 250 cm ein.";
  return;
}

Vor dem Rechnen prüft das Script die Eingaben. isNaN() steht für „is Not a Number" und erkennt, wenn im Feld gar keine gültige Zahl steht. Die beiden Vergleiche danach fangen unsinnige Werte ab — eine Körpergröße von 5 cm oder 900 cm ist offensichtlich ein Vertipper, meist eine Verwechslung von Meter und Zentimeter. return beendet die Funktion sofort, es wird nichts gerechnet. Für das Gewicht folgt direkt darunter dieselbe Prüfung mit den Grenzen 10 und 200 kg.

const bmi = Math.round(gewicht / Math.pow(groesse / 100, 2));

Das ist die BMI-Formel in einer Zeile. groesse / 100 rechnet Zentimeter in Meter um, Math.pow(…, 2) quadriert diesen Wert — pow steht für „power", also Potenz. Durch dieses Quadrat wird das Gewicht geteilt. Math.round() rundet das Ergebnis schließlich auf eine ganze Zahl, denn die Einordnung darunter arbeitet mit ganzen Zahlen.

function bewertung(bmi) {
  if (bmi < 18) return "Das ist starkes Untergewicht.";
  if (bmi === 18) return "Das ist deutliches Untergewicht.";
  if (bmi === 19) return "Das ist leichtes Untergewicht.";
  if (bmi >= 20 && bmi <= 24) return "Das liegt im idealen Bereich.";
  …
}

Hier steckt die Einordnung. Die Bedingungen werden von oben nach unten geprüft, und die erste, die zutrifft, liefert mit return sofort ihren Text zurück — alles Weitere wird dann gar nicht mehr angesehen. && bedeutet „und": Beide Vergleiche müssen stimmen, damit der Bereich 20 bis 24 gilt. Die drei Gleichheitszeichen in === vergleichen streng, also Wert und Typ; bei Zahlen ist das die sichere Schreibweise. Ganz am Ende steht ein return ohne Bedingung — das ist der Auffangfall für alles ab 40.

ausgabe.innerHTML = "Der BMI beträgt <strong>" + bmi + "</strong>. " + bewertung(bmi);

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

Zahl und Kommentar werden zu einem Satz zusammengesetzt und per innerHTML in die Ergebnisfläche geschrieben; dadurch darf der BMI in <strong>-Tags stehen und erscheint hervorgehoben. Die letzte Zeile verbindet den Knopf mit der Rechenfunktion. Das Script steht deshalb unter dem Formular — nur so existieren Felder und Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Die Kommentartexte in bewertung() könnt ihr frei umformulieren, ohne an der Rechnung etwas zu ändern. Wollt ihr die Einteilung der Weltgesundheitsorganisation abbilden, ersetzt ihr die Grenzwerte durch 18,5 / 25 / 30 — dann solltet ihr allerdings auch das Math.round() in der Formel weglassen und stattdessen mit toFixed(1) auf eine Nachkommastelle ausgeben, sonst gehen die halben Stufen beim Runden verloren. Die Plausibilitätsgrenzen 50/250 und 10/200 stehen ebenfalls direkt im Code und lassen sich anpassen.