購物車更新總計 Function 不起作用

Question

請幫忙，我正在建立一個電子商務商店，我是一名新開發人員，無法讓這個 function 工作，任何幫助將不勝感激。 updateCartTotal() 根本不起作用，腳本被添加到 HTML 主體的底部，刪除購物車 function 工作得很好，只是 updateCartTotal() 根本不起作用

提前謝謝大家

HTML：

            <span class="material-symbols-outlined" id="cart-icon">
                shopping_cart
            </span>

            <div class="cart">
                <h2 class="cart-title">Your Shopping Cart</h2>

                <div class="cart-content">
                    
                    <div class="cart-box">
                        <img src="/Monn-Homme/images/tie1.jpg" class="cart-image">

                        <div class="detail-box">
                            <div class="cart-product-title">
                                Tie
                            </div>
                            <div class="cart-price"> £10.99</div>
                            <input type="number" value="1" class="cart-qty">
                        </div>
                                                    

                        <span class="material-symbols-outlined" id="cart-remove">
                                delete
                        </span>

                        
                        

                    </div>

                </div>

                <div class="total">
                    <div class="total-title">Total</div>
                    <div class="total-price">£10.99</div>
                </div>

                <button type="button" class="buy-btn">Buy Now</button>
                <span class="material-symbols-outlined" id="close-cart">
                    close
                </span>

            </div>

        </div>

Javascript：

let cartIcon = document.getElementById("cart-icon");
let cart = document.querySelector(".cart");
let CloseCart = document.querySelector("#close-cart");

cartIcon.onclick = () => {
    cart.classList.add("active");
};

CloseCart.onclick = () => {
    cart.classList.remove("active");
};

if (document.readyState == "loading") {
    document.addEventListener("DOMContentLoaded", ready);
} else {
    ready();
}


function ready(){
    var removeCartButtons = document.getElementsByClassName("material-symbols-outlined");
   
    for (var i = 0; i < removeCartButtons.length; i++) {
       var button = removeCartButtons[i];
       button.addEventListener("click", removeCartItem)

    }

    // Quantity Change //

    var quantitInputs = document.getElementsByClassName("cart qty");
    for (var i = 0; i < quantitInputs.length; i++) {
        var input = quantitInputs[i];
        input.addEventListener("change", quantityChanged);
    }
}


function removeCartItem(event) {
    var buttonClicked = event.target;
    buttonClicked.parentElement.remove();
    updateCartTotal() ;
}

quantityChanged = (event) => {
var input = event.target;
if (isNaN(input.value) || input.value <= 0) {
    input.value = 1;
}

updateCartTotal() ;

}



function updateCartTotal() {
    var cartContainer = document.getElementsByClassName("cart-content")[0];
    var cartBox = cartContainer.getElementsByClassName("cart-box");
    var total = 0
    for (var i = 0; i < cartBox.length; i++) {
        var cartBox = cartBox[i]
        var priceElement = cartBox.getElementsByClassName("cart-price")[0]
        var quantityElement = cartBox.getElementsByClassName("cart-qty")[0]
        price = parseFloat(priceElement.innerText.replace("£", ""))
        quantity = quantityElement.value
        total = total + (price * quantity)
        
    }

    document.getElementsByClassName("total-price")[0].innerText = total
    
   
}

我希望總數隨着數量的變化而更新，並且 function 可以工作

Answer 1

你有以下錯誤-

1. 沒有名稱為 class 的元素cart qty 。

var quantitInputs = document.getElementsByClassName("cart qty");

2. quantityChanged function 應該有一個function關鍵字。
3. 您在updateCartTotal function 中使用了相同名稱的變量 cartBox，這造成了混淆-

var cartBox = cartContainer.getElementsByClassName("cart-box");
for (var i = 0; i < cartBox.length; i++) {
    var cartBox = cartBox[i]
}

現在，在修復這些錯誤后，您的代碼將如下所示正常運行。

注意-我將所有聲明移至頂部並替換了這兩種方法-

getElementsByClassName() = querySelectorAll() 方法

getElementsByClassName()[0] = 查詢選擇器()

 let cartIcon = document.querySelector("#cart-icon"); let cart = document.querySelector(".cart"); let CloseCart = document.querySelector("#close-cart"); var quantitInputs = document.querySelectorAll(".cart-qty"); var removeCartButtons = document.querySelectorAll(".material-symbols-outlined"); var cartContainer = document.querySelector(".cart-content"); var cartBox = cartContainer.querySelectorAll(".cart-box"); var totalEl = document.querySelector(".total-price") cartIcon.onclick = () => { cart.classList.add("active"); }; CloseCart.onclick = () => { cart.classList.remove("active"); }; if (document.readyState == "loading") { document.addEventListener("DOMContentLoaded", ready); } else { ready(); } function ready() { for (var i = 0; i < removeCartButtons.length; i++) { var button = removeCartButtons[i]; button.addEventListener("click", removeCartItem); } // Quantity Change // for (var i = 0; i < quantitInputs.length; i++) { var input = quantitInputs[i]; input.addEventListener("change", quantityChanged); } } function removeCartItem(event) { var buttonClicked = event.target; buttonClicked.parentElement.remove(); updateCartTotal(); } function quantityChanged(event) { var input = event.target; if (isNaN(input.value) || input.value <= 0) { input.value = 1; } updateCartTotal(); }; function updateCartTotal() { var total = 0; for (var i = 0; i < cartBox.length; i++) { var cartBoxEl = cartBox[i]; var priceElement = cartBoxEl.querySelector(".cart-price"); var quantityElement = cartBoxEl.querySelector(".cart-qty"); price = parseFloat(priceElement.innerText.replace("£", "")); quantity = quantityElement.value; total = total + price * quantity; } if (totalEl) { totalEl.innerText = total; } }

 <div> <span class="material-symbols-outlined" id="cart-icon"> shopping_cart </span> <div class="cart"> <h2 class="cart-title">Your Shopping Cart</h2> <div class="cart-content"> <div class="cart-box"> <img src="/Monn-Homme/images/tie1.jpg" class="cart-image"> <div class="detail-box"> <div class="cart-product-title"> Tie </div> <div class="cart-price"> £10.99</div> <input type="number" value="1" class="cart-qty"> </div> <span class="material-symbols-outlined" id="cart-remove"> delete </span> </div> </div> <div class="total"> <div class="total-title">Total</div> <div class="total-price">£10.99</div> </div> <button type="button" class="buy-btn">Buy Now</button> <span class="material-symbols-outlined" id="close-cart"> close </span> </div> </div>