Geschwindigkeitsmesser

So funktioniert das Script

Das Script ist ein schönes Einsteiger-Beispiel, weil es die drei Grundschritte jedes Rechen-Scripts zeigt: Eingaben lesen und prüfen, rechnen, Ergebnis ausgeben. Alles steckt in einer sofort ausgeführten Funktion, damit keine Variablennamen mit anderen Scripts auf der Seite kollidieren.

if (meterFeld.value === "" || sekundenFeld.value === "") {
  ausgabe.textContent = "Bitte füllt beide Felder aus.";
  return;
}

Zuerst die Pflichtfeld-Prüfung, die schon das Original hatte: Ist eines der beiden Felder leer, erscheint ein Hinweis und return beendet die Funktion. Das Original nutzte dafür ein alert()-Fenster — heute schreibt man solche Meldungen lieber direkt in die Seite, das wirkt weniger aufdringlich und funktioniert auch dann, wenn der Browser Pop-ups unterdrückt.

const meter = Number(meterFeld.value.replace(",", "."));
const sekunden = Number(sekundenFeld.value.replace(",", "."));

Dann werden die Feldinhalte in Zahlen verwandelt. replace(",", ".") tauscht vorher ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript kennt intern nur die englische Schreibweise — so dürft ihr auch 9,58 eintippen. Liefert Number() keinen brauchbaren Wert (das prüft isNaN(), „is Not a Number"), gibt es wieder eine freundliche Meldung statt eines kryptischen NaN im Ergebnis. Neu gegenüber dem Original ist auch der Sonderfall sekunden === 0: Eine Division durch null ergäbe Infinity, deshalb wird sie vorher abgefangen.

const geschwindigkeit = Math.abs(meter / sekunden);

Die eigentliche Physik: Geschwindigkeit ist Strecke geteilt durch Zeit. Math.abs() liefert den Absolutbetrag — falls jemand eine negative Zahl eingibt, kommt trotzdem eine positive Geschwindigkeit heraus. Dieses Detail stammt unverändert aus dem Original.

ausgabe.innerHTML = "Die Geschwindigkeit beträgt <strong>" +
  String(geschwindigkeit).replace(".", ",") + " m/s</strong>";

Zum Schluss die Ausgabe: Das Ergebnis wird in Text verwandelt, der Dezimalpunkt wieder gegen ein deutsches Komma getauscht und der Satz per innerHTML in die Ergebnisfläche geschrieben — die <strong>-Tags heben den Wert dabei fett hervor. Verbunden wird das Ganze mit dem Knopf über addEventListener("click", …); das Script steht dafür unter dem Formular, damit die Elemente beim Ausführen schon existieren.

Zum Anpassen: Wollt ihr das Ergebnis lieber in km/h, ändert ihr die Rechenzeile in Math.abs(meter / sekunden) * 3.6 und die Einheit im Ausgabetext. Und wer krumme Ergebnisse mit vielen Nachkommastellen vermeiden will, hängt an die Rechnung ein .toFixed(2) an — das rundet auf zwei Stellen.