Cześć. Jestem na początku nauki JavaScript i buduje sobie prostą listę zakupów. Nie mogę dłuższy czas rozwiązać pewnego problemu. Dodając nowy produkt tworzę również nowego inputa o klasie 'price-product-input' do którego mogę wpisać cenę produktu. Chciałbym, żeby po wpisaniu ceny do tego inputa automatycznie zliczała się i pojawiała suma kwoty do zapłaty za wszystkie produkty do spana z klasą "total-price" w prawym górnym rogu. Zrobiłem już działająca funkcję findTotal która ma zliczać wartości wpisywanych przeze mnie cen produktów jednak nie potrafię uruchomić jej w chwili wpisania jakiejś kwoty nowopowstałego inputa o klasie 'price-product-input' . Próbuje pobrać nowe inputy przez getElementsByClassName i później ustawić na nie addEvent Listenera, ale pojawia mi się bład w konsoli : arr.addEventListener is not a function.
W tej chwili dodałem nowy przycisk "sum", którego pobrałem i uruchamia on funkcję findTotal i to działa, ale ja chciałbym, żeby zliczanie działało dynamicznie od razu po zaktualizowaniu inputa z ceną produktu, a nie dopiero po naciśnięciu przycisku "sum".
Podaje link do mojego kodu na JSFiddle: https://jsfiddle.net/39kb1vdg/
Z tego co rozumiem, to masz zmienną arr, w której przechowujesz wszystkie pobrane inputy. Musisz zatem przypisać listener każdemu elementowi z osobna, bo to, co Ty próbujesz zrobić, to dodać nasłuchiwanie na "tablicę" (HTML Collection, uściślając). Użyj sobie pętelki for na zmiennej arr i dla każdego elementu przypisz listener z osobna, czyli:
for (let i = 0; i < arr.length; i++) {
arr[i].addEventListener('click', func);
}
Jest jeszcze alternatywa tego rozwiązania, bo tak naprawdę masz gotową metodę tablicową forEach() do takich operacji, tylko wówczas trzeba pamiętać, że zmienna arr nie jest tak naprawdę tablicą, a obiektem HTML Collection, ponieważ metoda getElementsByClassName() zwraca właśnie taki obiekt. Wtedy musisz użyć dodatkowo spread operatora, by zmienić to w tablicę, czyli:
const arr = [...document.getElementsByClassName("class-name")];
arr.forEach(el => el.addEventListener('click', func);
Dziękuje za odpowiedź. Kolega wyżej rozwiązał mój problem. Musiałem ustawić nasłuch za pomoca pętli na wszystkie elementy HTML Collection i teraz działa. Zostawiam poprawiony kod: https://jsfiddle.net/urm9jtw0/