Mehreren Bildern einen EventListener verpassen

EG2011 · 21.09.2011, 19:56

Moin allerseits,

Ich stehe vor folgendem Problemchen (und kenne mich mit dem Thema Event-Handling noch nicht sonderlich gut aus):

Ich habe eine Tabelle in der in jeder Zelle ein Bild steckt.
Nun möchte ich allen diesen Bildern einen EventListener zuweisen, der auf das onlick-Event lauscht. Bei einem Klick auf ein Bild soll etwas passieren.
Das Ganze soll hinterher so eine Art Memory-Spiel geben. Ich klicke auf ein Bild und es passiert etwas (z.B. Bildwechsel o.ä.).

Hierzu habe ich folgenden Code geschrieben:

Code:

window.onload = function() {
for (huetchen in document.getElementById("tabelle").getElementsByTagName('img')) {
      huetchen.addEventListener(
	   "click",
	   function() {
	   alert("Klick!");
	   }
      )
}
}

Fällt jemandem hier schon ein Fehler auf?
Firebug meldet mir "huetchen.addEventListener is not a function".

Für Hilfe wäre ich dankbar.

Gruß, EG

nikosch · 21.09.2011, 20:05

Code:

for (index in foo)

EG2011 · 21.09.2011, 20:20

Okay, die Variable Huetchen wird also nicht wie z.B. in Java mit dem Objekt gefüllt, sondern ist schlichtweg ein Index, richtig?

So funktioniert es nun, allerdings bleibt die Fehlermeldung "huetchen.addEventListener is not a function" in Firebug trotzdem bestehen:

Code:

				window.onload = function() {
					for (huetchenIndex in document.getElementById("tabelle").getElementsByTagName('img')) {
					huetchen = document.getElementById("tabelle").getElementsByTagName('img')[huetchenIndex];
					huetchen.addEventListener(
						"click",
						function() {
						alert("Klick!");
						}
					)
					}
				}

Hmm.....

nikosch · 21.09.2011, 20:24

Warum machst Du den Lookup doppelt? Das ist doch unnötig!

PHP-Code:

  window.onload = function() {
  var images = document.getElementById("tabelle").getElementsByTagName('img');
  for (index in images) {
    images[huetchenIndex].addEventListener("click", function() {
        alert("Klick!");
      }
    );
  }
}

Die nächste Kritik wäre, dass DU window.onload brachial überschreibst

EG2011 · 21.09.2011, 20:34

Klar, du hast Recht, doppelt is nie gut. Habe es angepasst.

Wie gesagt, bin noch nicht so firm mit den Events.
Meine Tabelle wird via PHP aufgebaut und dann über JS mit Bildern gefüllt.
Ich wollte sicherstellen, dass das auf jeden Fall passiert ist bevor ich den Bildern EventListener verpasse.
Welche bessere Möglichkeit gäbe es denn da?

Gruß, EG

nikosch · 21.09.2011, 20:36

Gar keine. Nur überschreibst Du damit eventuell vorhandene onLoad events. Die gesetzten sollte man vorher abfragen und im neuen Callback mit aufrufen.

EG2011 · 21.09.2011, 20:39

Ah okay. Andere hab ich da allerdings noch nicht.
Ich werde versuchen mich an deine Worte zu erinnern falls ich damit mal Probleme kriegen sollte

.

Danke dir!

litterauspirna · 21.09.2011, 21:18

Mal ne blöde Frage.

Was steht normaler in einem Eventlistener an der Stelle?

PHP-Code:

  alert("Klick!");

Ich kapiere das mit den Evenlistenern ne so wirklich.

nikosch · 21.09.2011, 21:50

Alles was Du willst, was onClick passieren soll.

eagle275 · 22.09.2011, 08:55

eben bei einem Memory Spiel würde das Bild des Elements ausgetauscht ... der Fantasie sind fast keine Grenzen gesetzt

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
slideshow mit mehreren bildern? bitte um hilfe	lwallens	PHP Tipps 2009	3	15.08.2009 14:22
Mehrere Auflösungen von hochgeladenen Bildern, Ansatz	christophM	PHP Tipps 2009	1	26.05.2009 15:13
Verständnisfrage: Aufruf von mehreren Usern	vegeta	PHP Tipps 2006	2	02.06.2006 15:39
[Erledigt] MySQL Abfrage aus mehreren Tabellen		Datenbanken	1	12.04.2005 17:53

21.09.2011, 19:56
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Mehreren Bildern einen EventListener verpassen Moin allerseits, Ich stehe vor folgendem Problemchen (und kenne mich mit dem Thema Event-Handling noch nicht sonderlich gut aus): Ich habe eine Tabelle in der in jeder Zelle ein Bild steckt. Nun möchte ich allen diesen Bildern einen EventListener zuweisen, der auf das onlick-Event lauscht. Bei einem Klick auf ein Bild soll etwas passieren. Das Ganze soll hinterher so eine Art Memory-Spiel geben. Ich klicke auf ein Bild und es passiert etwas (z.B. Bildwechsel o.ä.). Hierzu habe ich folgenden Code geschrieben: Code: window.onload = function() { for (huetchen in document.getElementById("tabelle").getElementsByTagName('img')) { huetchen.addEventListener( "click", function() { alert("Klick!"); } ) } } Fällt jemandem hier schon ein Fehler auf? Firebug meldet mir "huetchen.addEventListener is not a function". Für Hilfe wäre ich dankbar. Gruß, EG


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.09.2011, 20:05
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Code: for (index in foo) __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

21.09.2011, 20:20
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Okay, die Variable Huetchen wird also nicht wie z.B. in Java mit dem Objekt gefüllt, sondern ist schlichtweg ein Index, richtig? So funktioniert es nun, allerdings bleibt die Fehlermeldung "huetchen.addEventListener is not a function" in Firebug trotzdem bestehen: Code: window.onload = function() { for (huetchenIndex in document.getElementById("tabelle").getElementsByTagName('img')) { huetchen = document.getElementById("tabelle").getElementsByTagName('img')[huetchenIndex]; huetchen.addEventListener( "click", function() { alert("Klick!"); } ) } } Hmm.....

21.09.2011, 20:24
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Warum machst Du den Lookup doppelt? Das ist doch unnötig! PHP-Code: `window.onload = function() { var images = document.getElementById("tabelle").getElementsByTagName('img'); for (index in images) { images[huetchenIndex].addEventListener("click", function() { alert("Klick!"); } ); } }` Die nächste Kritik wäre, dass DU window.onload brachial überschreibst __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

21.09.2011, 20:34
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Klar, du hast Recht, doppelt is nie gut. Habe es angepasst. Wie gesagt, bin noch nicht so firm mit den Events. Meine Tabelle wird via PHP aufgebaut und dann über JS mit Bildern gefüllt. Ich wollte sicherstellen, dass das auf jeden Fall passiert ist bevor ich den Bildern EventListener verpasse. Welche bessere Möglichkeit gäbe es denn da? Gruß, EG

21.09.2011, 20:36
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gar keine. Nur überschreibst Du damit eventuell vorhandene onLoad events. Die gesetzten sollte man vorher abfragen und im neuen Callback mit aufrufen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

21.09.2011, 20:39
EG2011 Erfahrener Benutzer Registriert seit: 11.04.2011 Beiträge: 141 PHP-Kenntnisse: Anfänger	Ah okay. Andere hab ich da allerdings noch nicht. Ich werde versuchen mich an deine Worte zu erinnern falls ich damit mal Probleme kriegen sollte . Danke dir!

21.09.2011, 21:18
litterauspirna Erfahrener Benutzer Registriert seit: 24.04.2008 Beiträge: 3.172 PHP-Kenntnisse: Anfänger	Mal ne blöde Frage. Was steht normaler in einem Eventlistener an der Stelle? PHP-Code: `alert("Klick!");` Ich kapiere das mit den Evenlistenern ne so wirklich. __________________ Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir. http://www.lit-web.de

21.09.2011, 21:50
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Alles was Du willst, was onClick passieren soll. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

22.09.2011, 08:55
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	eben bei einem Memory Spiel würde das Bild des Elements ausgetauscht ... der Fantasie sind fast keine Grenzen gesetzt __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste