JavaScript-Programmierung von Kopf bis Fuß

396 Kapitel 9

Den gleichen Event-Handler für mehrere Events benutzen

function init() {

var image = document.getElementById("zero");

image.onclick = showAnswer;

var images = document.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

images[i].onclick = showAnswer;

}

};

Es ist sicher keine Lösung für unser Problem, für jedes Bild einen eigenen Handler zu

schreiben. Stattdessen benutzen wir den vorhandenen Handler showAnswer, um auf alle

click-Events sämtlicher Bilder zu reagieren. Damit das funktioniert, müssen wir showAnswer

ein bisschen anpassen. Zwei Dinge sind nötig:

Den gleichen Handler für alle Bilder benutzen

Den alten Code für das Bild mit der ID

»zero« verwerfen wir und richten dafür

einen passenden Handler ein.

Hier lesen wir die Elemente anhand

ihres Tag-Namens (img) aus der Seite

aus. Dadurch werden alle Bilder in der

Seite gefunden und zurückgegeben. Die

gefundenen Bilder speichern wir in der

Variablen images.

Danach iterieren wir über die

Bilder und weisen nacheinander

jedem Bild den click-Handler

showAnswer zu. Jetzt hat die

onclick-Eigenschaft für alle Bilder

den Handler showAnswer.

Die showAnswer-Funktion allen Bildern auf der Seite

als click-Handler zuweisen.

Die Funktion showAnswer so umbauen, dass sie nicht

nur zero.jpg, sondern alle Bilder scharf stellen kann.

1

2

Und hier ist die erste Hürde: Im aktuellen Code benutzen wir getElementById, um eine

Referenz auf das Bild mit der ID "zero" zu holen und der onclick-Eigenschaft die showAnswer-

Funktion zuzuweisen. Anstatt für jedes Bild einen Aufruf von getElementById hartzuko-

dieren, zeigen wir Ihnen hier einen leichteren Weg: Holen Sie sich alle Bilder auf einmal,

iterieren Sie darüber und richten Sie die nötigen click-Handler ein. Hierfür benutzen wir eine

DOM- Methode, die Sie noch nicht gesehen haben: document.getElementsByTagName. Die

Methode übernimmt einen Tag-Namen wie img, p oder div und gibt eine Liste mit Elemen-

ten zurück, die darauf passen, wie hier gezeigt:

Beide Dinge wollen wir so verallgemeinern, dass sie auch dann noch funktionieren, wenn der Seite weitere

Bilder hinzugefügt werden. Anders gesagt: Wenn wir den Code richtig schreiben, sollte es möglich sein, die

Seite um neue Bilder zu erweitern (oder welche zu löschen), ohne dass sich der Code verändert.

Den click-Handler allen Bildern auf der Seite zuweisen.