Ein div mit JavaScript und OnClick auslösen

Erstellt am 13. November 2014 von Michaelkriese

Durch JQuery wird diese banale Funktion noch einfacher, aber will man Back to the Roots und hat eine Webseite, bei der man auf JQuery verzichten möchte lässt sich ein Button wie folgt mit Hilfe von reinem JavaScript umsetzen:

HTML:
<div id="test">
<input type="submit" id="submit" value="GO">
</div>
JavaScript:
document.getElementById("submit").onclick = function () {
 alert("test");
};

Im HTML teil wird ein Div und ein Input Feld erzeugt, wobei das Inputfeld eine ID Benötigt, damit man per JavaScript darauf zugreifen kann.
document.getElementByID durchsucht nun das gesamte HTML Dokument nach dem Element mit der ID submit und führt beim Klicken eine Meldung aus.
Hierbei ist man nicht auf die ID beschränkt. Es gibt unter anderem noch:

  • getElementsByClassName()
  • getElementsByName()
  • getElementsByTagName()

Auch .onclick ist nicht das einzige Event, es gibt eine Lange liste, die man unter folgendem Link findet:
http://www.w3schools.com/jsref/dom_obj_event.asp

Hier noch das Beispiel zum ansehen:
http://jsfiddle.net/1ttwyprv/