Lösungen zu Eventhandler-Übungen

Aufgabe 1 - onclick

...
function test()
{
  alert("Hallo");
}
...
<input type="button" value="Klick drauf!" onclick="test()">
...
 

Aufgabe 2 - onchange, onblur

Der Unterschied zwischen den beiden Event-Handlern onblur und onchange wird in diesem Beispiel deutlich, wenn Sie anstelle von onchange einfach onblur eingeben.
  • Bei Verwendung des Eventhandlers onchange wird nur bei Änderungen an der Eingabe der Eventhandler aufgerufen wenn Sie das Feld verlassen indem Sie z.B. irgendwo sonst in die HTML-Seite klicken.
  • Bei Verwendung des Eventhandlers onblur wird grundsätzlich bei jedem Verlassen des Feldes die Funktion test aufgerufen wenn Sie das Feld verlassen indem Sie z.B. irgendwo sonst in die HTML-Seite klicken.
...
  function test(value)
  {
    if( value == "test" )
    {
      alert("Ihre Eingabe ist richtig");
    }
    else
    {
      alert("Sie müssen 'test' eingeben");
    }
  }
...
  <form name="myForm">
 
    Name: <input type="text" onblur="test(this.value)">
 
  </form>
...

Aufgabe 3 - onload

Der Eventhandler onload wird aufgerufen, sobald die HTML-Seite vom Browser fertig geladen wurde.

a) Bei onload soll eine Funktion aufgerufen werden, welche mit einem Alert ein "Hallo" ausgibt.
...
    function hallo()
    {
        alert("hallo");
    }
...
    <body onload="hallo()">
...
 
 
b) Bei onload soll eine Funktion aufgerufen werden, welche mit document.getElementById("out").innerHTML einen Text in einem <div>-Tag erzeugt.
...
  function hallo()
  {
    document.getElementById("ausgabe").innerHTML
       = "Die HTML-Seite ist fertig geladen";
  }
...
<body onload="hallo()">
  <div id="ausgabe"></div>
</body>
...

Aufgabe 4

...

Aufgabe 5

...
  var pin = "";
 
  function buttonfunc(number)
  {
    if(pin.length<4)
    {
      pin = pin+number;
      document.getElementById("ausgabe").innerHTML = "PIN: " + pin;
    }
    else
    {
      alert("Ihre PIN hat maximal 4 Stellen!");
    }
  }
 
  function backspace()
  {
    if(pin.length>0)
    {
      pin = pin.substr(0,pin.length-1);
      document.getElementById("ausgabe").innerHTML = "PIN: " + pin;
    }
  }
...
  for( var i=0; i<10; i++)
  {
    document.write("<button onclick='buttonfunc(" + i + ")'>" + i + "</button>")
  }
...
  <button onclick="backspace()">Letztes Zeichen löschen</button>
  <div id="ausgabe">Bislang keine Ausgabe</div>
 
...