In HTML gibt es verschiedene Elemente, um Formulare zu erzeugen. Die wichtigsten sind:

<input type="text">

<input type="number">

<input type="password">

<input type="date">

<input type="color">

<input type="checkbox"> Ja?

<input type="radio" name="auswaehlen"> Option 1
<input type="radio" name="auswaehlen"> Option 2

<button>Tu was!</button>

Natürlich bringt uns dieses Formular erst mal gar nichts, da wir die Daten bis jetzt noch nicht verarbeiten können. Hier kommt JavaScript ins Spiel.

Buttons können verschiedene Aktionen ausführen, wie z.B. die +-*/-Buttons oben im Taschenrechner.

Hierzu muss man dem Button sagen, welche Aktion er ausführen soll, wenn er angeklickt wird:

<button onclick="tuWasTolles()">Text des Buttons</button>

Anschließend muss man im JavaScript-Bereich nur noch eine Funktion mit dem gleichen Namen definieren:

<script>
  function tuWasTolles() {
    alert("Hallo, Welt!");
  }
</script>

Das sieht dann am Ende so aus:

Text des Buttons

Jetzt wird es spannend. Was, wenn wir Formulare und Buttons miteinander in Verbindung bringen möchten? Ich möchte z.B. ein Programm schreiben, das mein Alter berechnet, wenn ich mein Geburtsjahr eingebe.

Das fertige Programm könnte z.B. so funktionieren:

Das Formular dazu könnte z.B. so aussehen:

Mein Geburtsjahr ist <input type="number" id="geburtsjahr">.
<button onclick="wieAlt()">Wie alt bin ich?</button>

Wie ihr eben gelernt habt, müsste der JavaScript-Code dann mindestens so aussehen:

<script>
  function wieAlt() {
    alert("Keine Ahnung...");
  }
</script>

Nun gilt es noch, den Code mit Leben zu füllen, da er noch nicht funktioniert. Wie ihr vielleicht schon bemerkt habt, hat das Eingabefeld im Formular ein ID-Attribut. Hiermit können wir den eigegebenen Text auslesen:

let alterAlsText = document.getElementById('geburtsjahr').value;
debugger;

Wenn ihr das eingebt und die Seite mit dem Inspektor öffnet, bekommt ihr folgendes angezeigt: Wie ihr seht, ist das noch keine Zahl, sondern eine Zeichenkette. Diese müssen wir zuerst in eine Zahl verwandeln, bevor wir das Alter ausrechnen können:

let alterAlsText = document.getElementById('geburtsjahr').value;
let alterAlsZahl = parseInt(alterAlsText);
let alter = 2021 - alterAlsZahl;
debugger;

Auch diesen Code könnt ihr einmal mit dem Inspektor begutachten: Ihr seht, dass alterAlsZahl nun eine Zahl ist (die Gänsefüßchen fehlen), und dass das Alter korrekt ausgerechnet wurde. Nun müssen wir das Ergebnis nur noch anzeigen, und fertig ist unser erstes JavaScript-Programm:

alert("Du feierst dieses Jahr deinen " + alter + ". Geburtstag!");

Schön wäre es noch, wenn das Ergebnis nicht als Dialog angezeigt werden würde, sondern als Text unterhalb des Buttons. Fügt folgenden HTML-Code nach dem Button ein:

<p id="alter">Gute Frage...</p>

Auch hier ist es wieder wichtig, dass das Element ein id-Attribut bekommen hat. Auf dieses können wir wieder mit JavaScript zugreifen. Ersetze den alert(…)-Aufruf mit folgendem Code:

document.getElementById('alter').innerText = "Du feierst dieses Jahr deinen " + alter + ". Geburtstag!";

Und fertig ist unser Programm.