Gewichts-Umrechner

So funktioniert das Script

Das Script besteht aus vier Teilen: einer Tabelle mit den sieben Einheiten und ihren Umrechnungsfaktoren, einer Funktion zum Leeren der Felder, einer kleinen Formatierhilfe für die Ausgabe und der eigentlichen Umrechnung. Der Trick, mit dem sieben Felder mit so wenig Code auskommen, steckt in den Faktoren: Jede Einheit bekommt eine Zahl, die sagt, wie viel eine Einheit davon in einem Kilogramm steckt. Kilogramm selbst ist damit die Bezugsgröße mit dem Faktor 1.

const einheiten = [
  { id: "gw-kg",   faktor: 1 },
  { id: "gw-oz",   faktor: 35.273944 },
  { id: "gw-lb",   faktor: 2.2046215 },
  …
];

Das ist ein Array (eine Liste) aus Objekten. Jedes Objekt ist ein kleines Datenpaket mit zwei Angaben: der id des zugehörigen Eingabefeldes und dem Umrechnungsfaktor. Ein Kilogramm sind 35,273944 Unzen, also steht bei den Unzen dieser Faktor. Der große Vorteil dieser Schreibweise: Wollt ihr eine weitere Einheit ergänzen — etwa Gramm mit dem Faktor 1000 — legt ihr im HTML ein Feld mit einer neuen id an und schreibt eine Zeile in diese Liste. Am restlichen Code ändert sich nichts.

function feld(einheit) {
  return document.getElementById(einheit.id);
}

Diese Mini-Funktion holt zu einem Eintrag der Liste das passende Eingabefeld aus der Seite. document.getElementById() sucht ein Element anhand seiner id — der einzigen Kennzeichnung, die auf einer HTML-Seite nur ein einziges Mal vorkommen darf. Weil das gleich an mehreren Stellen gebraucht wird, lohnt sich die eigene Funktion.

for (const einheit of einheiten) {
  const eingabe = feld(einheit).value.trim().replace(",", ".");
  if (eingabe !== "") {
    kilogramm = Number(eingabe) / einheit.faktor;
    break;
  }
}

Hier sucht das Script das eine Feld, in das ihr etwas eingetippt habt. Die for … of-Schleife geht die Einheiten der Reihe nach durch; trim() wirft versehentliche Leerzeichen weg und replace(",", ".") tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript rechnet nur mit der englischen Schreibweise. Beim ersten nicht leeren Feld wird umgerechnet und mit break die Schleife abgebrochen.

Die Umrechnung selbst ist eine einzige Division: Ein Wert geteilt durch seinen Faktor ergibt das Gewicht in Kilogramm. 16 Unzen geteilt durch 35,273944 sind rund 0,4536 kg. Von dieser Zwischengröße aus lassen sich dann alle anderen Einheiten durch eine Multiplikation erreichen.

einheiten.forEach(function (einheit) {
  feld(einheit).value = formatiere(kilogramm * einheit.faktor);
});

forEach ist eine Schleife in Kurzform: Sie ruft die angegebene Funktion einmal für jeden Eintrag der Liste auf. Jedes Feld bekommt also das Kilogramm-Zwischenergebnis mal seinen eigenen Faktor — und weil auch das Ausgangsfeld mitgefüllt wird, steht dort danach der aufgeräumte, gerundete Wert.

function formatiere(wert) {
  if (!isFinite(wert)) {
    return "";
  }
  return String(Number(wert.toPrecision(6)));
}

Ohne Formatierung stünden in den Feldern Zahlen wie 0.45359237000000004 — ein bekannter Effekt beim Rechnen mit Kommazahlen im Computer. toPrecision(6) kürzt auf sechs bedeutsame Stellen, das anschließende Number() wirft überflüssige Nullen am Ende weg und String() macht daraus wieder Text für das Eingabefeld. isFinite() fängt den Fall ab, dass gar keine sinnvolle Zahl herauskommt. Wollt ihr genauere Werte sehen, erhöht einfach die 6 in toPrecision(6).

einheiten.forEach(function (einheit) {
  feld(einheit).addEventListener("focus", leeren);
});

Zum Schluss werden die Knöpfe und Felder verdrahtet. addEventListener("focus", leeren) heißt: Sobald ein Feld den Eingabefokus bekommt — durch Klick oder Tabulatortaste —, läuft die Funktion leeren() und macht alle sieben Felder leer. Genau das sorgt dafür, dass beim Umrechnen immer nur ein einziger Wert dasteht. Wer das nicht mag, löscht diese vier Zeilen; dann muss man die anderen Felder allerdings von Hand leeren, sonst rechnet das Script immer wieder vom Kilogramm-Feld aus.