javascript - 我的 displayCart() 方法似乎永远不会执行，我不知道为什么

问题描述

这是我网站购物车的代码。除了 displayCart() 方法外，一切正常。没有语法错误，但它永远不会被执行，但我不知道为什么。

let productsPage = document.querySelectorAll('.addToCart');

let products = [
    {
        name: 'wheyProtein',
        tag: 'whey',
        price : 799,
        inCart: 0
    },
    {
        name: 'wheyProtein1',
        tag: 'whey1',
        price : 299,
        inCart: 0
    },
    {
        name: 'wheyProtein2',
        tag: 'whey2',
        price : 299,
        inCart: 0
    },
    {
        name: 'wheyProtein3',
        tag: 'whey3',
        price :349,
        incart: 0
    },
    {
        name: 'wheyProtein4',
        tag: 'whey4',
        price : 330,
        inCart: 0
    },
    {
        name: 'wheyProtein5',
        tag: 'whey5',
        price : 299,
        inCart: 0
    },
]
for(let i=0; i<productsPage.length;i++){
    productsPage[i].addEventListener('click',() => {
        cartNumbers(products[i]);
        totalCost(products[i]);
    })

  
}

function onLoadCartNumbers(){
    let productNumbers = localStorage.getItem('cartNumbers');
    if(productNumbers){
    //document.querySelector('.cart span').textContent = productNumbers;
    }
}

function cartNumbers(product){

    let productNumbers = localStorage.getItem('cartNumbers');

    productNumbers = parseInt(productNumbers);

if(productNumbers){
localStorage.setItem('cartNumbers', productNumbers+1);
//document.querySelector('.span').textContent=productNumbers+1;
}else{
localStorage.setItem('cartNumbers', 1);
//document.querySelector('.span').textContent=1;
}
setItem(product);
}

function setItem(product){
let cartItems = localStorage.getItem('ProductsInCart');
cartItems = JSON.parse(cartItems);

if(cartItems != null){

    if(cartItems[product.tag] == undefined){
        cartItems = {
            ...cartItems,
            [product.tag]: product
        }
    }
    cartItems[product.tag].inCart += 1;
}else{
    product.inCart = 1;
    cartItems={
         [product.tag]: product
     }  
}
 
localStorage.setItem("ProductsInCart",JSON.stringify(cartItems));
}

function totalCost(product){
    console.log("products price is",product.price);
    console.log("working");

    let cartCost = localStorage.getItem('totalCost');
    console.log("my cartcost is", cartCost);



if(cartCost != null){
cartCost = parseInt(cartCost);
localStorage.setItem("totalCost", cartCost+ product.price);
}else{
    localStorage.setItem("totalCost", product.price);
}
}

function displayCart() {
    console.log("working cart");
     let cartItems = localStorage.getItem("productsInCart");
     cartItems = JSON.parse(cartItems);
      let productContainer = document.querySelector("products-container");
      let cartCost = localStorage.getItem('totalCost');
 
     if(cartItems && productContainer){
         productContainer.innerHTML = '';
     Object.values(cartItems).map(item =>{
        productContainer.innerHTML += ` 
        <div class="product">
        <ion-icon name="close-circle"><ion-icon>
        <img src="${item.tag}.jpg">
        <span>${item.name}</span>
        </div>
        <div class ="price">${item.price},00</div>
        <div class ="quantity"><ion-icon class = "decrease" name = "arrow-dropleft-circle"></ion-icon><span>${item.incart}</span><ion-icon class="increase" name ="arrow-dropright-circle"></ion-icon></div>
        <div class="total">
        ${item.incart * item.price},00
        </div>
        `
     });

     productContainer.innerHTML += `
     <div class="baskerTotalContainer">
     <h4 class="baskerTotalTitle">
     Basket Total
     </h4>
     <h4 class = "baskerTotal">
     R${cartCost},00
     </h4>
     `;

     }
}
onLoadCartNumbers();
displayCart();

我在代码末尾调用该方法，但我在 displayCart() 方法中尝试了一个 console.log，它只是确认它永远不会被执行。

标签： javascripthtmlcssweb

javascript - 我的 displayCart() 方法似乎永远不会执行，我不知道为什么

问题描述

解决方案

推荐阅读