增加和减少项目数量后更改购物车总计

Question

我正在尝试弄清楚如何使事件侦听器在购物车中增加和减少项目，以实际增加购物车中的AMOUNT。现在，如果我单击“增加”或“减少”，数字将增加，但购物车价格和总计不会改变，因为totals数组位于单独的函数中。我对如何组合事件侦听器感到困惑，该事件侦听器增加或减少计数器以影响项目和总计的数量。

// close cart

 const closeCart = document.querySelector('.close-cart');
 const cartOverlay = document.querySelector('.cart-overlay');
 const cart = document.getElementById('cartbro');

 closeCart.addEventListener("click", function(){

    cartOverlay.classList.remove("transparentBcg");
    cart.classList.remove("showCart");
    }
);



     // add items to cart

     (function(){

        const cart = document.getElementById('cartbro');
    const cartInfo = document.getElementById('cart-info');

   cartInfo.addEventListener('click', function(e){
       showCart();
       showTotals();
    });




    const cartBtn = document.querySelectorAll('.bag-btn');

    cartBtn.forEach(function(btn){
    btn.addEventListener('click', function(e){


       if(event.target.parentElement.classList.contains('bag-btn')){

        let fullPath = event.target.parentElement.previousElementSibling.src;
        let pos = fullPath.indexOf('images') + 6;
        let partPath = fullPath.slice(pos);


        const item = {};
        item.img = `images${partPath}`;
    let name = event.target.parentElement.nextElementSibling.textContent;
    item.name = name;
    let price = event.target.parentElement.nextElementSibling.nextElementSibling.textContent;

    let finalPrice = price.slice(1);
    item.price = finalPrice;

    const cartItem = document.createElement('div');
    cartItem.classList.add('cart-item');
    cartItem.innerHTML = `
        <img src="${item.img}" alt="">
    <div>
        <h4>${item.name}</h4>
        <h5 class="cart-item-price">${item.price}</h5>
        <span class="remove-item">remove</span>
    </div>
    <div>
        <i class="fas fa-chevron-up"></i>
        <p class="item-amount">1</p>
        <i class="fas fa-chevron-down"></i>
    </div> 
       `;

// select cart
     const cartContent = document.querySelector('.cart-overlay');
    const cart = document.getElementById('cartbro');
    const total = document.querySelector('.cart-footer');

    cart.insertBefore(cartItem,total);
    alert('your item added to cart');
    showTotals();
    showCart();
       }
    });
    });



    // show totals
    function showTotals(){

        const total = [];
        const items = document.querySelectorAll('.cart-item-price')
        items.forEach(function(item){
            total.push(parseFloat(item.textContent));
        });

        const totalMoney = total.reduce(function(total,item){
           total += item;
            return total;
        }, 0)
        const finalMoney = totalMoney.toFixed(2);


        document.querySelector('.cart-total').textContent = finalMoney;
console.log(total);

    }



    function showCart(){

        const cartOverlay = document.querySelector('.cart-overlay');

        cartOverlay.classList.add("transparentBcg");
        cart.classList.add("showCart");



    }

     // remove item



    cart.addEventListener("click",function(e) {
        // e.target was the clicked element
      if (e.target && e.target.matches("span.remove-item")) {
          e.target.parentNode.parentNode.remove()
          showTotals();
        }
    });


// clear cart functionality

function clearCart(){
let cartItems = document.querySelectorAll('#cartbro .cart-item');
Array.from(cartItems).forEach(function(item) {
    item.remove();
    showTotals();
});  
}

// counter

const countBtn = document.querySelector('.counterBtn');
const counter = document.querySelector('.item-amount');
const itemPrice = document.querySelector('.cart-item-price');

counterValue = 0;

countBtn.addEventListener('click', function(e){
    const value = event.target;
if (value.classList.contains('fa-chevron-up')){
    counterValue++;

}
else if(value.classList.contains('fa-chevron-down')){
    counterValue--;
    if(counterValue < 0){
        counterValue = 0;
    }
}
counter.textContent = counterValue;

});






<!--  items-->
<section class="py-5" id="special-items">

        <div class="container my-5">
            <div class="row parent-container">
                <!--  item-->
                <div class="col-10 mx-auto col-sm-6 col-lg-4 my-3">
                    <div class="item-container">
                        <img src="images/nike-1.jpg" class= "img-fluid img-thumbnail item-img" alt="">
                        <button class="bag-btn" data-id="1">
                                <i class="fas fa-shopping-cart">
                                    add to bag
                                </i>
                            </button>
                            <h3>queen bed</h3>
                            <h4>$16</h4>
                    </div>
                </div>

cart

<!-- cart -->
<div class="cart-overlay">
    <div id="cartbro">
        <span class="close-cart">
            <i class="fas fa-window-close">
            </i>
        </span>
<h2>your cart</h2>    
<div class="cart-content">
    <!-- cart item -->
    <div class="cart-item">
        <img src="images/nike-1.jpg" alt="">
    <div>
        <h4>queen bed</h4>
        <h5 class="cart-item-price">9.00</h5>
        <span class="remove-item">remove</span>
    </div>
    <div class="counterBtn">
        <i class="fas fa-chevron-up" data-id="0"></i>
        <p class="item-amount">1</p>
        <i class="fas fa-chevron-down"></i>
    </div> 
    </div>
    </div>
        <!-- end of cart item -->