Instrukcja warunkowa ograniczająca dodawanie kolejnych elementów

pytanie zadane 28 listopada 2021 w JavaScript przez ShockWave Bywalec (2,350 p.)

Hej, mam problem z implementacją logiki, która ograniczy mi dodawanie tych samych elementów do listy zakupów. Gdy element będzie taki sam chcę po prostu wyświetlić ilość przy już istniejącym elemencie.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <div class="pizzas">
        </div>
        <div class="shoppingCart">
            <p class="totalPrice">Głodny? Zamów naszą pizzę</p>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>

fetch("https://raw.githubusercontent.com/alexsimkovich/patronage/main/api/data.json")
.then(data => data.json())
.then(data => {
    let valueCurrency = 0;
    let allOfPizzas = [];
    let pricePizza = [];
    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.className = "img";
        
        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);


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

            const pizza = document.createElement("div");
            pizza.className = "pizzaList";
            const pizzasList = document.createElement("li");
            const pizzaPrice = document.createElement("p");
            const count = document.createElement("h5");
            const btnRemove = document.createElement("button");
            btnRemove.innerText = "X";
            
            pizzasList.innerText = title.textContent;
            pizzaPrice.innerText = price.textContent;

            pizza.appendChild(pizzasList);
            pizza.appendChild(pizzaPrice);
            pizza.appendChild(btnRemove);

            pricePizza.push(price.textContent);
            
            totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);

            if(pizzasList === pizzasList)
            {
                // nie dodawaj kolejnego elementu do listy 
                // tylko dodaj +1 przy istniejącym elemencie
            }
            else
            {
                dodaj element do listy
                shoppingCart.prepend(pizza);

            }

            btnRemove.addEventListener("click", (e) => {
                pizza.remove();
                valueCurrency = valueCurrency - element.price;
                totalPrice.innerText = "Całkowita cena: " + valueCurrency.toFixed(2);
            })
        })

    });
    
})
.catch(err => console.log(err));

Chodzi mi dokładnie o tą instrukcje, wewnątrz napisałem co chcę osiągnąć.

Z góry dziękuję za pomoc.

komentarz 28 listopada 2021 przez Wiciorny Ekspert (281,530 p.)

nie wiem ale kolejny raz juz widze twoje implementacje i polecam zajmij się optymalizacją kodu i "clean code" bo tego się naprawdę nie da normalnie czytać,a co dopiero analizować z wyciąganiem kontekstów.
Przeczytaj jakieś książki o zasadach pisania kodu: samo wykorzystanie zasad Programowania funkcyjnego, może trochę rzeczy związanych z Clean Code-> z obiektowości np.
SOLID- tego jak tworzyć funkcje, czym jest podejście deklaratywne, nazewnictwa etc.
To tak moja rada na przyszłość, bo takiego kodu nawet od juniora to w projekcie nie zaakceptują

Podziel odpowiednią logike na funkcje, nie pakuj wszystko do jednego.

komentarz 28 listopada 2021 przez overcq Pasjonat (22,630 p.)

Coś w rodzaju:

            const doc_pizzaList = document.getElementsByClassName( "pizzaList" );
            let b = false;
            for( let i = 0; i != doc_pizzaList.length; i++ )
              { const e = doc_pizzaList[i];
                if( e.firstElementChild.innerText === pizzasList.innerText )
                { b = true;
                  break;
                }
              }
            if(b)
            {
                // nie dodawaj kolejnego elementu do listy 
                // tylko dodaj +1 przy istniejącym elemencie
            }
            else
            {
                //dodaj element do listy
                shoppingCart.prepend(pizza);
 
            }

Tylko że przy dodawaniu elementu musisz utworzyć jakiś licznik, a przy usuwaniu sprawdzać ten licznik.