JavaScripts › Verschiedenes

Benzinverbrauch

Rechnet aus gefahrenen Kilometern und getankten Litern den Verbrauch auf 100 Kilometer aus.

Wie viel schluckt das Auto eigentlich wirklich? Dieses Script beantwortet die Frage mit zwei Zahlen, die jeder an der Tankstelle ablesen kann: den gefahrenen Kilometern und den getankten Litern. Heraus kommt der Verbrauch auf 100 Kilometer — die Angabe, mit der in Deutschland und im übrigen Europa gerechnet wird. Mit Diesel, Autogas oder dem Verbrauch eines Motorrads funktioniert die Rechnung genauso, es ist immer dieselbe Formel.

Zur Bedienung: Ins erste Feld kommen die seit dem letzten Tanken gefahrenen Kilometer, ins zweite die Menge, die ihr jetzt getankt habt. Ein Klick auf „Berechnen" zeigt das Ergebnis auf zwei Nachkommastellen genau an. Als Beispiel sind 550 Kilometer und 38 Liter vorbelegt. Nachkommastellen dürft ihr wahlweise mit Komma oder Punkt eingeben.

Damit die Zahl auch stimmt, braucht es das richtige Messverfahren: Volltanken, dabei den Tageskilometerzähler auf null stellen, ganz normal fahren und beim nächsten Mal wieder volltanken. Die dann getankte Menge ist genau das, was auf der gefahrenen Strecke verbraucht wurde — und der Tageszähler nennt euch die Strecke. Wichtig ist, dass ihr an derselben Zapfsäule und mit derselben Abschaltautomatik tankt, sonst schwankt der Füllstand. Eine einzelne Tankfüllung ist außerdem nur eine Momentaufnahme: Kurzstrecke, Winterbetrieb, Anhänger oder Dachbox treiben den Wert spürbar nach oben. Aussagekräftig wird er erst über mehrere Tankfüllungen hinweg.

Die Angabe „Liter auf 100 km" ist übrigens keine Selbstverständlichkeit. Im Vereinigten Königreich und in den USA rechnet man umgekehrt in Meilen pro Gallone (mpg) — dort gilt also: je größer die Zahl, desto sparsamer das Fahrzeug. Bei uns ist es andersherum.

Verwandte Rechner findet ihr bei uns einige: Der Streckenkonverter rechnet Meilen in Kilometer um, wenn ihr eine Verbrauchsangabe aus dem englischsprachigen Raum vergleichen wollt. Was die Fahrt gekostet hat, bekommt ihr mit dem Dreisatz heraus — der Verbrauch ist im Grunde nichts anderes. Und der BMI-Rechner ist nach demselben Muster gebaut, falls ihr sehen wollt, wie sich so ein Script leicht auf eine andere Formel umbauen lässt.

Verschiedenes Baujahr 2004 läuft in deinem Browser

Am genauesten wird der Wert von Volltankung zu Volltankung gemessen.

So funktioniert das Script

Das Script ist in drei Teile gegliedert: Es liest die beiden Eingabefelder aus, prüft sie auf Plausibilität und rechnet dann den Verbrauch aus, den es als fertigen Satz in die Ergebnisfläche schreibt. Alles steckt in einer sofort ausgeführten Funktion, damit die Namen im Script nicht mit anderen Scripts auf derselben 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 mit Number() eine Zahl daraus. Das replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise: Aus "38,5" wird erst "38.5" und dann die Zahl 38.5. So dürft ihr tippen, wie ihr es gewohnt seid.

if (isNaN(km) || km <= 0) {
  ausgabe.textContent = "Bitte tragt die gefahrenen Kilometer als Zahl größer als 0 ein.";
  return;
}

Vor dem Rechnen wird geprüft. isNaN() steht für „is Not a Number" und erkennt, wenn im Feld gar keine gültige Zahl steht. Die zweite Bedingung ist hier besonders wichtig: Durch die Kilometer wird geteilt, und eine Division durch null liefert kein sinnvolles Ergebnis, sondern Infinity. Trifft eine der beiden Bedingungen zu, erscheint ein Hinweis, und return beendet die Funktion sofort. Für die Liter folgt darunter dieselbe Prüfung, dort ist nur eine negative Menge verboten.

const verbrauch = (liter / km) * 100;

Das ist die ganze Rechnung. liter / km ergibt den Verbrauch für einen Kilometer — bei 38 Litern auf 550 km sind das rund 0,069 Liter. Mal 100 genommen kommt der Verbrauch auf 100 Kilometern heraus, also etwa 6,91 Liter. Im Grunde ist das ein Dreisatz: bekannte Strecke, bekannte Menge, gesuchte Menge für eine andere Strecke.

verbrauch.toFixed(2).replace(".", ",")

Die Rohzahl wäre 6.909090909090909 — unbrauchbar für die Anzeige. toFixed(2) rundet auf zwei Nachkommastellen und gibt das Ergebnis als Text zurück, und das replace dahinter macht aus dem englischen Punkt wieder ein deutsches Komma. Das ist genau der umgekehrte Weg zu dem, was die Funktion zahl() beim Einlesen tut.

"Auf " + km.toLocaleString("de-DE") + " Kilometern habt ihr " +
liter.toLocaleString("de-DE") + " Liter Treibstoff gebraucht. Das entspricht " +
"<strong>" + verbrauch.toFixed(2).replace(".", ",") + " Litern auf 100 km</strong>.";

Hier wird der Ausgabesatz aus Text und Zahlen zusammengesetzt. toLocaleString("de-DE") schreibt die eingegebenen Zahlen in deutscher Schreibweise zurück — mit Komma statt Punkt und mit Tausendertrennung, aus 1500 wird also 1.500. Weil das Ergebnis per innerHTML gesetzt wird, darf der Verbrauchswert in <strong>-Tags stehen und erscheint hervorgehoben.

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

Die letzte Zeile verbindet den Knopf mit der Rechenfunktion: addEventListener("click", …) sorgt dafür, dass berechnen() bei jedem Klick läuft. Das Script steht dafür unter dem Formular — nur so existieren Felder und Knopf bereits, wenn es ausgeführt wird.

Zum Anpassen: Für Meilen und Gallonen ändert ihr nur die Beschriftungen im HTML und die Einheiten im Ausgabetext, die Formel bleibt dieselbe. Wollt ihr statt des Verbrauchs die Spritkosten ausrechnen, ergänzt ihr ein drittes Feld für den Literpreis und multipliziert die Liter damit. Und wer es genauer mag, erhöht die Zahl in toFixed(2) auf 3 — sinnvoll ist das allerdings kaum, weil die Messung selbst nie so genau ist.

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 Verschiedenes