Volumenrechner

So funktioniert das Script

Das Script arbeitet in vier Schritten: Es hält für jede Einheit einen Umrechnungsfaktor bereit, es sucht das eine Feld, in dem etwas steht, es rechnet daraus den Wert in Litern zurück, und es füllt damit alle fünf Felder neu. Der ganze Trick steckt in der Tabelle der Faktoren.

const einheiten = [
  { id: "vr-liter",  faktor: 1 },
  { id: "vr-floz",   faktor: 33.8239926 },
  { id: "vr-qt",     faktor: 1.056998 },
  { id: "vr-gallon", faktor: 0.2642499 },
  { id: "vr-impgal", faktor: 0.2200433 }
];

Das ist eine Liste aus Objekten. Ein Objekt fasst zusammengehörige Angaben unter Namen zusammen — hier die id des Eingabefelds und den faktor. Der Faktor sagt: Wie viel von dieser Einheit ist ein Liter? Ein Liter sind 33,8239926 fl oz, also 0,2642499 US-Gallonen und so weiter. Der Liter selbst hat den Faktor 1, er ist die Bezugsgröße. Braucht ihr noch ein weiteres Maß, etwa Milliliter, hängt ihr einfach eine Zeile mit faktor: 1000 an und legt im HTML ein passendes Feld an — mehr ist nicht nötig.

const eingabe = feld(einheiten[i]).value.replace(",", ".").trim();
if (eingabe !== "") {
  const wert = Number(eingabe);
  liter = wert / einheiten[i].faktor;
  break;
}

Die Schleife geht die fünf Felder der Reihe nach durch und hält beim ersten an, in dem etwas steht — break bricht die Schleife an dieser Stelle ab. replace(",", ".") lässt euch das deutsche Dezimalkomma benutzen, denn JavaScript rechnet intern nur mit dem Punkt. Die Division durch den Faktor macht aus dem eingetippten Wert wieder Liter: 2 Gallonen geteilt durch 0,2642499 ergibt rund 7,57 Liter.

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

Jetzt geht es rückwärts: Der Literwert wird mit jedem der fünf Faktoren multipliziert, und das Ergebnis landet im jeweiligen Feld. forEach ruft die übergebene Funktion einmal für jeden Eintrag der Liste auf — das ist die moderne Schreibweise für „mach das mit jedem Element“.

function formatiere(zahl) {
  const text = String(zahl);
  if (text.length <= 6) return text;
  const stellen = Math.max(0, 5 - String(Math.trunc(zahl)).length);
  return String(Number(zahl.toFixed(stellen)));
}

Rohe Rechenergebnisse sehen unschön aus: 33.823992600000004 will niemand lesen. Diese Funktion kürzt auf sechs Zeichen. Dafür schaut sie, wie viele Stellen die Zahl vor dem Komma hat (Math.trunc schneidet die Nachkommastellen ab), und lässt für den Rest so viele Nachkommastellen übrig, dass insgesamt sechs Zeichen herauskommen. toFixed rundet dabei richtig. Wollt ihr genauere Werte, erhöht einfach die 6 und die 5 um denselben Betrag.

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

Damit immer nur ein Feld gefüllt ist, leert das Script alle Felder, sobald ihr in eines hineinklickt. focus ist das Ereignis, das ausgelöst wird, wenn ein Eingabefeld die Schreibmarke bekommt. Stört euch das, lasst diese vier Zeilen einfach weg — dann müsst ihr aber selbst darauf achten, alte Werte vorher zu löschen, denn gerechnet wird immer mit dem ersten gefüllten Feld von links.

Ganz zum Schluss ruft das Script einmal kalibrieren() auf. Damit steht beim Laden der Seite schon ein Liter samt Umrechnung in den Feldern, statt fünf leerer Kästchen.