element[i].addEventListener is not a function

Question

Witam, mam tablicę z obrazkami i chcę ustawić na te obrazki event listener, niestety w konsoli pojawia mi się błąd "element[i].addEventListener is not a function". Oto mój kod:

var element = new Array;
for (i = 0; i <= 17; i++) {
 element[i]=document.getElementsByTagName('"img'+i+'"');
 element[i].addEventListener("click", jakasfunkcja);
}

 

Comments

Zapomniałeś o nawiasie przy new Array. Jednakże możesz zapisać po prostu var element = [];

Poza tym metoda document.getElementsByTagName() zwraca kolekcję elementów HTML, a nie pojedynczy element. Nie możesz przypisać EventListenera do więcej niż jednego elementu w jednej instrukcji. Oprócz tego, sam zapis '"img'+i+'"' jest zagmatwany - pojedynczy cudzysłów (apostrof) ma większe znaczenie od podwójnego cudzysłowia, a Ty je pomieszałeś.

Dodatkowo, w pętli korzystasz z globalnej zmiennej i, zamiast ją sobie zadeklarować (zapisać var albo ES6 let / const).

---

Zapomniałeś o nawiasie przy new Array.

Nie zapomniał. Działa też bez nawiasów – chociaż z takim zapisem w JS nie spotkałem się już wieki. 

---

Dzięki za uwagi, czyli rozumiem, że bardziej poprawna jest deklaracja za pomocą literału? Co do zapisu '"img' + i + '"', specjalnie użyłem apostrofów, żeby "i" nie odczytywało mi jako znak lecz jako zmienną- chciałem w pętli inkrementować "i", tak  żeby w każdym obrocie pętli "łapać" inny element po id: img0, img1, img2, aż do img17. Czy raczej powinienem się wystrzegać takiego zapisu?

edit. teraz zauwazyłem.. napisałem getElementsByTagName a nie getElementById, sory za zamieszanie...

---

Co do zapisu '"img' + i + '"', (...)

Wystarczy zapisać document.getElementsByTagName( 'img' + i ); Czyli img jako string i dodanie do tego iteratora i (zachodzi konkatenacja). Nie potrzeba tylu cudzysłowów i apostrofów.

Answer 1

Emmm

Może tak:

var imgs = document.querySelectorAll("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    imgs[i].addEventListener("click", fn);
}

Również można użyć pętli for...of albo metody forEach obiektu Array:

[...document.querySelectorAll("img")].forEach((el) => {
    el.addEventListener("click", fn);
});