• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem przy sumowaniu poszczególnych produktów

0 głosów
34 wizyt
pytanie zadane 4 dni temu w JavaScript przez ShockWave Bywalec (2,210 p.)

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.

1 odpowiedź

0 głosów
odpowiedź 4 dni temu przez ScriptyChris Mędrzec (168,320 p.)
wybrane 4 dni temu przez ShockWave
 
Najlepsza

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

komentarz 4 dni temu przez ShockWave Bywalec (2,210 p.)
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?
1
komentarz 4 dni temu przez ScriptyChris Mędrzec (168,320 p.)

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.

komentarz 4 dni temu przez ShockWave Bywalec (2,210 p.)
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?
komentarz 4 dni temu przez ScriptyChris Mędrzec (168,320 p.)

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.

komentarz 4 dni temu przez ShockWave Bywalec (2,210 p.)
nie wiem mimo wszystko jak miałbym wykorzystać to do zliczania kliknięć na danym elemencie

Podobne pytania

0 głosów
1 odpowiedź 88 wizyt
pytanie zadane 15 stycznia 2017 w SQL, bazy danych przez dawid4157 Nowicjusz (220 p.)
0 głosów
1 odpowiedź 152 wizyt
pytanie zadane 12 października 2019 w JavaScript przez Paweł Szewczyk Obywatel (1,410 p.)
0 głosów
1 odpowiedź 410 wizyt
pytanie zadane 30 stycznia 2018 w JavaScript przez adrian28 Użytkownik (540 p.)
Porady nie od parady
Pytania na temat serwisu SPOJ należy zadawać z odpowiednią kategorią dotyczącą tej strony.SPOJ

85,709 zapytań

134,503 odpowiedzi

298,532 komentarzy

56,629 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...