Problem przy sumowaniu poszczególnych produktów

Question

Cześć, 

mam problem przy sumowaniu poszczególnych produktów, potrzebuje sumy by wyświetlić podsumowaną wartość zamówienia.

data.forEach(element => {
        const shoppingCart = document.querySelector(".shoppingCart");
        const pizzas = document.querySelector(".pizzas");
        const box = document.createElement("div");
        const img = document.createElement("img");
        const title = document.createElement("h3");
        const ingredients = document.createElement("p");
        const price = document.createElement("h4");
        const btn = document.createElement("button");
        const totalPrice = document.querySelector(".totalPrice");
        
        box.className = "box";
        ingredients.className = "ingredients"
        btn.className = "btn";
        
        img.src = element.image;
        img.style.width = "250px";
        img.style.height = "250px";
        
        title.innerHTML = element.title;
        
        ingredients.innerHTML = element.ingredients;
        
        price.innerHTML = element.price.toFixed(2) + " zł";
        
        btn.innerHTML = "Dodaj do koszyka";
        
        box.appendChild(img);
        box.appendChild(title);
        box.appendChild(ingredients);
        box.appendChild(price);
        box.appendChild(btn);
        pizzas.appendChild(box);

        let valueCurrency = 0;

        btn.addEventListener("click", (e) =>{
            valueCurrency = valueCurrency + element.price;

            console.log(valueCurrency);
            const pizzasList = document.createElement("li");
            const pizzaPrice = document.createElement("p");
            pizzaPrice.innerText = price.textContent;
            
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);
            pizzasList.appendChild(pizzaPrice);
            pizzasList.innerText = title.textContent + " " + price.textContent;
            console.log(price.textContent)
            shoppingCart.prepend(pizzasList);
        })
    });

Chodzi dokładnie o valueCurrency, w którym dodaje wartość z json. Problem w tym, że gdy kliknę na inny produkt to cena się resetue i wraca do ceny pojedynczego produktu.

Dodaje też link do repo: https://github.com/ItsShock/internJavaScript

z góry dziękuję za pomoc.

Answer 1

Tworzysz zmienną valueCurrency w każdej iteracji na tablicy data, więc z każdą iteracją ta zmienna ma zerowaną wartość, a dopiero później ustawiasz ją indywidualnie (per iterowany element tablicy) na kliknięcie. Przenieś tą zmienną wyżej - nad scope callbacka przekazywanego do data.forEach( .. ) - a wtedy zmienna będzie trzymać swoją wartość pomiędzy iteracjami.

Dodatkowo, możesz użyć operatora += do sumowania wartości, jako skrót dla valueCurrency = valueCurrency + element.price

Comments

dzięki wielkie :D a mam jeszcze jedno pytanie, do shoppingList dodaje poprzez prepend każdy kolejny li. Tylko, że każdy kolejny li pojawia się przed tym poprzednim, ponieważ dzieje się to w pętli. W jaki sposób mogę sprawić, żeby tylko pierwszy li pojawił się przed a następne już normalnie po li?

---

Metoda forEach udostępnia indeks aktualnej iteracji jako drugi argument callbacka. Możesz więcej sprawdzić, czy indeks jest tym pierwszym i na tej podstawie użyć metody prepend lub append na elemencie shoppingCart.

---

I ostatnie chyba już pytanie, gdybym chciał dodać licznik dla poszczególnej pizzy, żeby zliczać ich ilość to mogę się jakoś dostać do eventu i zliczać je jakoś po kliknięciu na daną pizze?

---

Tak, w obiekcie eventu powinieneś mieć dostęp do property target, gdzie jest element, w kontekście którego wywołany został listener - możesz stamtąd odnieść się do praktycznie dowolnego elementu na stronie. Np. korzystając z metod pokroju:

• closest (szukaj do góry, po przodkach)
• contains (określ czy node zawiera potomka)
• querySelector (znajdź referencję do potomka lub rodzeństwa)
• [previous / next]ElementSibling (znajdź poprzednie/następne rodzeństwo)

, możesz sprawdzić czy dany element pizzy jest "w okolicy" elementu, na którym został triggerowany event, a nawet wziąć jego referencję, żeby np. zmienić mu klasę, usunąć go etc.

---

nie wiem mimo wszystko jak miałbym wykorzystać to do zliczania kliknięć na danym elemencie