[morfeuszNo1]

Cześć, uczę się troche JS i natrafiłem na problem którego nie jestem w stanie przeskoczyć. Robię sobie prosty wózek zakupowy i mam problem z funkcją usuwającą produkt z wózka.
Problem występuje w momencie dodania do funkcji usuwania funkcji która dodaje produkty poprzez .innerHTML po to aby odświeżyło mi wózek z aktualnymi produktami, bez dodawania jej funkcja działa dobrze i mogę usunąć kilka produktów na raz. Dodanie jej powoduje, iż eventListener działa tylko za pierwszym razem i kolejne kliknięcia nie robią nic. Podejrzewam, że błąd występuje w pętli for ale nie wiem jak to naprawić.

Kod:
let remove = document.querySelectorAll(".cart--remove");
for (let i = 0; remove.length > i; i++) {
remove[i].addEventListener('click', () => {
let attr = document.querySelectorAll('.cart__product')[i + 1].getAttribute("attr");
removeProduct(attr);
});
};

function removeProduct(attr) {
let item = localStorage.getItem('productsInCart');
item = JSON.parse(item);
let totalCount = localStorage.getItem('totalCount');
totalCount = parseInt(totalCount);

if (totalCount != null) {
localStorage.setItem('totalCount', totalCount - (item[attr].price * item[attr].inCart));

} else {
localStorage.setItem('totalCount', item[attr].price)
}

delete item[attr];
localStorage.setItem('productsInCart', JSON.stringify(item));

addToCart() //TUTAJ, bez tego eventListener działa wielokrotnie, a po dodaniu działa tylko raz.}

Consola nie wyrzuca żadnego błędu.
#javascript

[lobo]

@morfeuszNo1: A co masz w addToCart? Zakładam, że tworzysz nowy element który nie ma podpiętego eventa. Najlepiej zrób sobie eventa na clicku w sam koszyk i rozpoznawaj czy przypadkiem nie został kliknięty przycisk do kasowania tu masz pierwszy lepszy przykład z internetu https://javascript.info/event-delegation

[lobo]

@morfeuszNo1: Jeżeli nadpisujesz html koszyka wszystkimi rzeczami to pamiętaj, że to są nowe elementy i jeżeli nie podpinasz do nich eventa to nie będą ich miały

[lobo]

@morfeuszNo1: I dobrze na przyszłość by było dać kod na jsfiddle albo inne tego typu narzędzie to łatwiej byłoby ci pomóc

[morfeuszNo1]

@lobo:
Nadpisuję więc pewnie będzie tak jak mówisz. Dzięki zaraz się w to zagłębię.

function addToCart() {
let totalCount = localStorage.getItem('totalCount');
let cartProducts = document.querySelector(".cart__products");
let cartItems = localStorage.getItem('productsInCart');
cartItems = JSON.parse(cartItems);

if (cartProducts && cartItems) {
cartProducts.innerHTML = "";
Object.values(cartItems).map(item => {
cartProducts.innerHTML +=


![](./images/${item.tag}.png)
${item.name}

$${item.price}

${item.inCart}

$${item.price * item.inCart}


});
cartProducts.innerHTML +=


Total price
$${totalCount}


}
}

[lobo]

@morfeuszNo1: Jest tak jak powiedziałem, nadpisałeś sobie elementy i nie podpiąłeś eventa pod nowe więc albo po dodaniu dodawaj eventy do elementów albo lepiej zerknij na delegacje eventów

[lobo]

@morfeuszNo1: Dam ci jeszcze jedną radę w narzędziach developerskich przeglądarek np. w chrome możesz sobie podejrzeć jakie eventy są podpięte pod dany element, w chrome możesz to zrobić tak
kliknij prawym przyciskiem myszy na plusa w komentarzu -> zbadaj element po prawej stronie masz zakładkę event listeners i dalej to już z górki
https://www.stanleyulili.com/javascript/how-to-find-event-listeners-on-a-dom-node-when-debugging/
https://developers.google.com/web/updates/2015/05/get-and-debug-event-listeners

[morfeuszNo1]

@lobo: O tego nie znałem, dzięki. I potwierdza to powyższą teze, po jednym kliknięciu nie ma już eventlistenera na pozostałych. Dzięki wielkie za pomoc.

[rimyi]

@morfeuszNo1: na drugi raz wklejaj ten kod na jakis codepen bo tutaj jest kompletnie nieczytelne