[ERLEDIGT] addEventListener mit Array

sebjel · 29 November 2016

Hallo,

ich stehe gerade vor einem Problem, was eigentlich gar nicht so kompliziert klingt, bei mir aber irgendwie nicht klappen mag.

Ich habe folgenden Code:

Code:

"use strict";

{  
const init = () => $$('[alt = lightbulb]').addEventListener("click", () => console.log("init"));
 
init();
}

Ich habe also mehrere Bilder, bei denen das Wort "lightbulb" bei alt hinterlegt ist, der Selektor $$('[alt = lightbulb]') gibt mir ein Array aus. Nun kann ich allerdings kein Event hinzufügen, da dann die Fehlermeldung "$$(...).addEventListener is not a function" kommt. Anscheinend kann ich den Event-Listener nicht mit einem Array durchführen.

Gibt es da Möglichkeiten, wie man dies trotzdem durchführen kann?

SpiceLab · 29 November 2016

sebjel schrieb:
Code:

$$('[alt = lightbulb]')

der Selektor $$('[alt = lightbulb]')

Nun kann ich allerdings kein Event hinzufügen, da dann die Fehlermeldung "$$(...).addEventListener is not a function" kommt.

Kann es sein, dass es sich hierbei um ein jQuery-Script handelt?

jQuery-Selektoren besitzen nur ein $-Zeichen -> https://api.jquery.com/category/selectors/
Vorsichtshalber im Selektor das Leerzeichen vor und nach dem =-Zeichen entfernen. Oder existiert diese Schreibweise in dieser Form auch im HTML-Code?
Ersetze .addEventListener() durch .on() (Grund für die Fehlermeldung).
Weil's hier nicht ersichtlich ist: Das Script am Dokumentende (vor </body></html>) aufrufen, ansonsten mit $( document ).ready() ausstatten.

Im Netz habe ich zwei JSFiddle-Beispiele (jQuery-Scripts) aufgestöbert, die demonstrieren, dass einem Array problemlos ein Eventhandler hinzugefügt werden kann:

Tronjer · 29 November 2016

Spicelab schrieb:
Kann es sein, dass es sich hierbei um ein jQuery-Script handelt?

Willkommen im Jahre 2016. Das $ wird auch in ES6, bsw. für String-Interpolation verwendet. Im obigen Fall ist es eine Chrome-eigene Abkürzung für document.querySelectorAll.

Zur Frage:
$$('[alt = lightbulb]') liefert eine Collection und an die lässt sich kein EventListener anhängen. Du könntest das Array aber durch eine Schleife laufen lassen.

Code:

let collection = document.querySelectorAll('[alt = lightbulb]');

let init = function() {
  console.log('clicked');
}

for (let item of collection) {
  item.addEventListener('click', ()=>
    init()
  );
}

SpiceLab · 30 November 2016

Tronjer schrieb:
Willkommen im Jahre 2016.

Na denn, Prosit Neujahr!

sebjel · 30 November 2016

Danke für die Antworten!

Habs jetzt einfach so gelöst, dass ich um alle Bilder mit dem zugehörigen alt eine div gestellt habe und dann mit dem EventListener diese div anspreche.

[ERLEDIGT] addEventListener mit Array

sebjel

Neues Mitglied

SpiceLab

Mod | ZENmechanic

Tronjer

Senior HTML'ler

SpiceLab

Mod | ZENmechanic

sebjel

Neues Mitglied

Neueste Beiträge