Decrease Item JS

Question

I am new at JS and struggle about shopping cart case. I use LocalStorage to store products and everything goes well.

But when I tried to decrease the product by buttons in shopping cart, first product is remove decreasing count point one by one itself from page but after that unable to use other products decreasing button.

However if start decreasing items from bottom of cart everything goes well. How can ı fix this? And thanks for all!

I realized that, eksiButtons value returns nodeList, and its all index numbers of buttons are starts from 0 and even one of them removes from page nodeList still keeps button inside. But if refresh the page nodelist updates itself by a minus length.

codes are below

const veri = localStorage.getItem("urunler") // Localden ürünleri çekiyor
let urunler = JSON.parse(veri) // Çekilen ürünleri urunler diye bir değişkene dizi olarak kaydediyor.

const wrapper = document.querySelector(".wrapper") // Sepet Alanını Seçiyor

let itemCount = document.querySelector(".item-count")  // Sepet logoyu seçiyor
let totalPrice = document.getElementById("total-fiyat")

sayiArttir()


for(i of urunler){

    let div = document.createElement('div')
    div.classList.add("row")
    div.innerHTML = 
    `  
        <div class="inner-card  p-4 bg-light rounded border border-secondary g-2">
                        
            <ul class="d-flex justify-content-between align-items-center list-unstyled">
                <li>
                    <div class="foto-cerceve">
                            <img src="../img/t1.avif">
                    </div>
                </li>

                <li>${i.baslik}</li>

                <li class="d-flex justify-content-between align-items-center gap-3">
                
                    <button class="btn btn-secondary btn-sm rounded-pill eksi"">
                        <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center">-</span> 
                    </button>
                    
                
                <span class="text-warning fs-5"> x<span class="sayi">${i.adet}</span> </span> 
                
                <div class="btn btn-secondary btn-sm rounded-pill arti">
                    <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center" >+</span> 
                </div>
                
                </li>

                <li>${((i.fiyat)*(i.adet))} TL</li>

                <li class="btn btn-danger btn-md sil">Sil</li>
            </ul>
        </div> 
        </div>

    `
    wrapper.append(div)

    if(i.adet <= 0){
        div.innerHTML = " "
    }
}
// Eksi butonlarını seçmek için bir döngü oluştur

let eksiButtons = document.querySelectorAll('.eksi');

// let eksiBela = Array.from(eksiButtons)
const sayi = document.querySelectorAll('.sayi');
const row = document.querySelectorAll('.row');

eksiButtons.forEach((i, index)=>{
    i.addEventListener("click", function(){
        
        
       
        console.log()


        if((index < urunler.length) && (urunler[index].baslik === i.parentElement.parentElement.children[1].textContent)){
                urunler[index].adet--
                
                if(urunler[index].adet <= 0 )
                {
                   urunler.splice(index, 1);
                    
                }
        
                sayi[index].textContent--
                
                if(sayi[index].textContent <= 0)
                {  
                    row[index].remove();

                }

                
        }  

        localStorage.setItem("urunler", JSON.stringify(urunler))
        sayiArttir()
    })
})

Answer 1

I figured it out today. Added a fuction to manipulate localstorage because everything link between each other by using it. Other novice js learner may encounter my problem therefore I am putting new code.

Note: Just added localdenSil() function at row 147 as a commit.

const veri = localStorage.getItem("urunler") // Localden ürünleri çekiyor
let urunler = JSON.parse(veri) // Çekilen ürünleri urunler diye bir değişkene dizi olarak kaydediyor.

const wrapper = document.querySelector(".wrapper") // Sepet Alanını Seçiyor

let itemCount = document.querySelector(".item-count")  // Sepet logoyu seçiyor
let totalPrice = document.getElementById("total-fiyat")

urunGoster()
sayiArttir()
urunler.filter(i => console.log(i.adet))


// Eksi butonlarını seçmek için bir döngü oluştur
let eksiButtons = document.querySelectorAll('.eksi');
let sayi = document.querySelectorAll('.sayi');
let row = document.querySelectorAll('.row');
// let theUrun = urunler.find(i => )

eksiButtons.forEach((i, index) => {
    i.addEventListener("click", function azalt()
    {
        itemCount.innerHTML--
        sayi[index].textContent--
        urunler[index].adet--
        if(sayi[index].textContent <= 0 )
        {
            row[index].innerHTML = " "
        }
        localdenSil()
    })
})



function sayiArttir() {
    sepetSayisi = (JSON.parse(localStorage.getItem('urunler')))
    let counter = 0
    for(i of sepetSayisi){
        counter += i.adet
    }
    itemCount.innerHTML = counter
}
function urunGoster(){
    for(i of urunler){

        let div = document.createElement('div')
        div.classList.add("row")
        div.innerHTML = 
        `  
            <div class="inner-card  p-4 bg-light rounded border border-secondary g-2">
                            
                <ul class="d-flex justify-content-between align-items-center list-unstyled">
                    <li>
                        <div class="foto-cerceve">
                                <img src="../img/t1.avif">
                        </div>
                    </li>
    
                    <li>${i.baslik}</li>
    
                    <li class="d-flex justify-content-between align-items-center gap-3">
                    
                        <button class="btn btn-secondary btn-sm rounded-pill eksi"">
                            <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center">-</span> 
                        </button>
                        
                    
                    <span class="text-warning fs-5"> x<span class="sayi">${i.adet}</span> </span> 
                    
                    <div class="btn btn-secondary btn-sm rounded-pill arti">
                        <span class=" text-white rounded-pill align-items-center d-flex justify-content-center align-items-center" >+</span> 
                    </div>
                    
                    </li>
    
                    <li>${((i.fiyat)*(i.adet))} TL</li>
    
                    <li class="btn btn-danger btn-md sil">Sil</li>
                </ul>
            </div> 
            </div>
    
        `
    
         wrapper.append(div)
    
    }
    
}
function localdenSil()
{
    const filtreDizi = urunler.filter(i => i.adet > 0)   
    localStorage.setItem("urunler", JSON.stringify(filtreDizi))
}