Javascript onclick

Die onclick-Eigenschaft in JavaScript wird verwendet, um eine Funktion auszuführen, wenn ein HTML-Element durch einen Mausklick aktiviert wird.

Wir müssen dafür sorgen, dass unser JavaScript erst ausgeführt wird, nachdem der Browser den Inhalt des Body-Tags geladen hat. Also kann das Script am Ende der Seite gespeichert werden oder wir nutzen die Eigenschaft onload des window Objektes.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OnClick Beispiel</title>
</head>
<body>

<button id="meinButton">Klick mich!</button>

<script>
  // Die Funktion, die durch den Klick aufgerufen wird
  function buttonClick() {
    alert("Der Button wurde geklickt!");
  }

  // Das HTML-Element mit der ID "meinButton" referenzieren
  var meinButton = document.getElementById("meinButton");

  // Der onclick-Handler wird der Funktion buttonClick zugewiesen
  meinButton.onclick = buttonClick;
</script>

</body>
</html>

Beim onclick wird die Funktion auswertung aufgerufen die das Alter berechnet. 

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alter berechnen</title>
</head>
<body>
  <h1>Alter berechnen</h1>
  Wann bist du geboren?
  <input type="text" name="gebjahr" id="gebjahr">
  <input type="button" name="absenden" id="absenden" value="Alter berechnen" onclick="auswertung()">
  
  <script language="javascript">
    function auswertung() {
      let gebjahr = document.getElementById("gebjahr").value;
      
      // Prüfen, ob das Eingabefeld nicht leer ist
      if (gebjahr !== "") {
        let alter = 2023 - parseInt(gebjahr, 10); // Umwandlung in eine ganze Zahl 
        alert("Du bist " + alter + " Jahre alt");
      } else {
        alert("Bitte gib dein Geburtsjahr ein");
      }
    }
  </script>
</body>
</html>

Die 10 in parseInt(gebjahr, 10) gibt die Basis des Zahlensystems an, das für die Umwandlung verwendet wird. In diesem Fall ist es das dezimale Zahlensystem, also die Basis 10.

Die Funktion parseInt kann in JavaScript auch Zahlen in anderen Zahlensystemen interpretieren, wie zum Beispiel im hexadezimalen (Basis 16) oder oktal (Basis 8) System. Indem du die Basis explizit angibst (in diesem Fall 10 für dezimal), stellst du sicher, dass die Funktion die Eingabe als Dezimalzahl interpretiert.

Wenn die Basis nicht angegeben wird, könnte die Funktion versuchen, die Zahl aufgrund des Präfixes zu interpretieren. Zum Beispiel würde "0x10" als hexadezimale Zahl (16) interpretiert werden, und "010" als oktale Zahl (8). Um solche unerwünschten Verhaltensweisen zu vermeiden, ist es eine gute Praxis, die Basis zu spezifizieren.

In diesem speziellen Fall, in dem du das Geburtsjahr wahrscheinlich als Dezimalzahl interpretieren möchtest, hat die 10 keine Auswirkung auf das Ergebnis, ist aber eine klare Angabe der Absicht und sorgt für konsistentes Verhalten.

  1. Du kannst die onclick-Attribute nutzen, um den Wert des gedrückten Buttons an die Funktion zu übergeben.
  2. Du kannst den Vergleich name=let durch this.id === 'let' ersetzen, um den Wert des gedrückten Buttons zu überprüfen.
  3. Du kannst das <script>-Element in den <head>-Bereich verschieben, um sicherzustellen, dass es erst ausgeführt wird, nachdem die DOM-Elemente erstellt wurden.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wissensquiz</title>
  <script>
    function auswertung(buttonValue) {
      if (buttonValue === 'let') {
        alert("Ja, das ist Richtig");
      } else {
        alert("Nein, leider falsch");
      }
    }
  </script>
</head>
<body>
  Wie wird eine Variable in Javascript definiert?
  <input type="button" name="$var" id="$var" value="$var" onclick="auswertung(this.value)">
  <input type="button" name="let" id="let" value="let" onclick="auswertung(this.value)">
</body>
</html>

In diesem Beispiel wird der onclick-Handler mit this.value aufgerufen, was den Wert des gedrückten Buttons an die auswertung-Funktion übergibt. Die Funktion vergleicht dann diesen Wert mit dem erwarteten Wert (‚let‘) und gibt entsprechend eine Benachrichtigung aus.

Oftmals ist es sinnvoll eine Bestätigung über die Enter – Taste auszuführen:

// Event-Listener für die Enter-Taste
        document.getElementById("aufgabe").addEventListener("keyup", function (event) {
          if (event.key === "Enter") {
            todo();
          }
        });