Hundejahre

So funktioniert das Script

Das Script ist ein Musterbeispiel für den einfachsten Fall überhaupt: einen Wert einlesen, eine Rechnung machen, das Ergebnis anzeigen. Genau diese drei Schritte stecken in der Funktion rechnen(). Das Ganze ist in eine sofort ausgeführte Funktion eingepackt, damit die Namen darin nicht mit anderen Scripts der Seite kollidieren.

const feld = document.getElementById("hj-alter");
const ausgabe = document.getElementById("hj-ergebnis");
const alter = Number(feld.value.replace(",", "."));

document.getElementById() sucht ein Element der Seite anhand seiner id — einmal das Eingabefeld, einmal die Fläche für das Ergebnis. Mit feld.value kommt man an das heran, was jemand eingetippt hat; das ist immer Text, auch wenn nur Ziffern darin stehen. Number() macht daraus eine echte Zahl, und replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt, denn JavaScript versteht intern nur die englische Schreibweise.

if (feld.value.trim() === "" || isNaN(alter) || alter < 0) {
  ausgabe.textContent = "Bitte tragt euer Alter als Zahl ein.";
  return;
}

Drei Fälle werden abgefangen, verknüpft mit || („oder"): ein leeres Feld — trim() entfernt dabei versehentliche Leerzeichen —, eine Eingabe, die keine Zahl ergibt, und ein negatives Alter. isNaN() heißt „is Not a Number" und ist die übliche Art, eine misslungene Umwandlung zu erkennen. Trifft einer der Fälle zu, erscheint ein Hinweis, und return beendet die Funktion sofort — ohne return würde das Script weiterrechnen und NaN anzeigen.

const hundejahre = alter / 7;

Die Rechnung selbst ist die Faustregel in Codeform. Weil ein Hundejahr sieben Menschenjahren entspricht, wird das Menschenalter durch 7 geteilt: Aus 35 Jahren werden 5 Hundejahre. Das Original schrieb an dieser Stelle direkt in ein zweites Eingabefeld, und zwar über document.hundejahr.dogyears.value — eine sehr alte Schreibweise, die Formulare über ihren name ansprach. Sie funktioniert in heutigen Browsern zwar noch, gilt aber als überholt; getElementById ist eindeutiger und unabhängig davon, ob das Feld überhaupt in einem Formular steckt.

ausgabe.innerHTML =
  "Euer Alter in Hundejahren: <strong>" +
  hundejahre.toLocaleString("de-DE", { maximumFractionDigits: 1 }) +
  "</strong>";

Ohne Formatierung käme bei 30 Jahren die wenig hilfreiche Zahl 4.285714285714286 heraus. toLocaleString("de-DE", …) löst gleich zwei Probleme auf einmal: Die Angabe maximumFractionDigits: 1 begrenzt die Nachkommastellen auf eine, und die deutsche Schreibweise sorgt für ein Komma statt eines Punkts — aus 4.3 wird also 4,3. Weil hier innerHTML statt textContent benutzt wird, darf das Ergebnis in <strong>-Tags stehen und erscheint hervorgehoben.

document.getElementById("hj-rechnen").addEventListener("click", rechnen);

Die letzte Zeile verbindet den Knopf mit der Funktion. addEventListener("click", rechnen) heißt so viel wie: „Wenn auf dieses Element geklickt wird, führe rechnen aus." Beachtet, dass hinter rechnen keine Klammern stehen — die Funktion wird hier nicht aufgerufen, sondern nur übergeben. Das Script steht dafür unter dem Formular, damit der Knopf schon existiert, wenn diese Zeile läuft.

Zum Anpassen: Die 7 in der Rechenzeile ist der ganze Umrechnungsfaktor. Wer die realistischere Näherung für erwachsene Hunde nehmen will, ersetzt sie durch eine andere Zahl. Und wer mehr Nachkommastellen sehen möchte, erhöht den Wert bei maximumFractionDigits.