Question

我在使用onclick通过图标添加和从本地存储中删除商品时，购物车功能出现问题。我希望X ion-icon /按钮从购物车/本地存储中完全删除该项目，而向左和向右按钮则也可以增加该项目。我不断收到未定义的参考错误，否则它将破坏另一个功能。似乎我改变得越多，得到的错误就越多，或者解释或中断只有0个，但没有功能。

我尝试创建通过“ onclick”传递并增加和删除项目的函数，但我感觉自己开枪了。

我最终将其恢复为原始功能，希望获得一些见识或指导（关于创建多个版本的非常重要的经验教训）

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width-device-width, initial-scale=1.0">
         <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
        <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css"  rel="stylsheet">
        <link rel="stylesheet" href="resources/style.css">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" >
        <script src="https://kit.fontawesome.com/c8e4d183c2.js"   SameSite=None; Secure></script>
        <script type="module" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule="" src="https://unpkg.com/ionicons@5.1.2/dist/ionicons/ionicons.js"></script>
        <title>Shopping Cart</title>
    </head>
    <body>
        <header class="cartpage">
            <div class="overlay"></div>
            <nav>
                <h2 id="logo"><a href="index.html">Le'FIAT</a></h2>
                <ul>
                    <li><a href="index.html#shop">SHOP</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a class="nav-link">
                        <!-------search-icon------->
                        <div class="search-icon"></div>
                        <div class="search-box">
                            <!-------input-->
                            <input type="text" placeholder="Search">
                        <!----------search-icon------->
                            <div class="s-icon"><i class="fas fa-search"></i></i></div>
                        </div>
                    </a></li>
                    <!-----------cart-icon------>
                    <li class = cart>
                        <a href="cart.html">
                            <ion-icon name="basket"></ion-icon><span>0</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </header>

        <div class="products-container">
            <div class="products-header">
                <h5 class="product-title">PRODUCT</h5>
                <h5 class="price">PRICE</h5>
                <h5 class="quantity">QUANTITY</h5>
                <h5 class="total">TOTAL</h5>
            </div>
            <div class="products">

            </div>
        </div>

        <!------jquery--------->
        <script type="text/javascript" src="resources/jquery.js" ></script>

        <!---------script------->
        <script src="resources/script.js"></script>

    </body>
</html>

我遇到问题的JS地区


    function displayCart() {
        let cartItems = localStorage.getItem("productsInCart");
        cartItems = JSON.parse(cartItems);
        let productContainer = document.querySelector(".products");
        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" onclick="removeItem()");></ion-icon>
                <img src="resources/media/${item.tag}.jpg">
                    <span>${item.name}</span>
                </div>
                <div class="price">$${item.price}.00</div>
                    <div class="quantity"><ion-icon name="arrow-back-circle"></ion-icon>
                    <span>${item.inCart}</span>
                    <ion-icon name="arrow-forward-circle"></ion-icon>
                </div>
                <div class="total">
                    $${item.inCart * item.price}.00
                </div>
                `
     
            });   
            
            productContainer.innerHTML += `
                <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">
                    Total
                </h4>
                <h4 class="basketTotal">
                $${cartCost}.00
                </h4>
            `    
        };

        };
        
    } 


          
        function removeItem(productContainer) {
            // Removes an element from the document.
            var element = document. getElementById(productContainer);
            element. parentNode. removeChild("${item.price}");
}

在此先感谢您的见解或指导

完整的JS文件

$(document).ready(function() {
  $('.search-icon').click(function() {
    $('.search-icon').toggleClass('active') //Search Icon Change OnClick
    $('.search-box').toggleClass('active') //box show WHen Click Icon
  })
});

let carts = document.querySelectorAll('.add-cart');

let products = [{
    name: 'Coastal Overnight',
    tag: 'coastalovernight',
    price: 125,
    inCart: 0
  },
  {
    name: 'Campsite Reservation',
    tag: 'campsitereservation',
    price: 45,
    inCart: 0
  },
  {
    name: 'San Gorgonio Overnight',
    tag: 'sangorgonioovernight',
    price: 125,
    inCart: 0
  },
  {
    name: 'Shore Dive',
    tag: 'shoredive',
    price: 95,
    inCart: 0
  },
  {
    name: 'Baden Powell Overnight',
    tag: 'badenpowellovernight',
    price: 125,
    inCart: 0
  },
  {
    name: 'Gear Rental',
    tag: 'gearrental',
    price: 65,
    inCart: 0
  },
  {
    name: 'Lakeside Overnight',
    tag: 'sangorgonioovernight',
    price: 125,
    inCart: 0
  }

];

for (let i = 0; i < carts.length; i++) {
  carts[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('.cart span').textContent = productNumbers + 1;
  } else {
    localStorage.setItem('cartNumbers', 1);
    document.querySelector('.cart span').textContent = 1;
  }

  setItems(product);
}

function setItems(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("The product price is", product.price);
  let cartCost = localStorage.getItem('totalCost');

  console.log("My cartCost is", cartCost);
  console.log(typeof cartCost);

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




function displayCart() {
  let cartItems = localStorage.getItem("productsInCart");
  cartItems = JSON.parse(cartItems);
  let productContainer = document.querySelector(".products");
  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" onclick="removeItem()");></ion-icon>
                <img src="resources/media/${item.tag}.jpg">
                    <span>${item.name}</span>
                </div>
                <div class="price">$${item.price}.00</div>
                    <div class="quantity"><ion-icon name="arrow-back-circle"></ion-icon>
                    <span>${item.inCart}</span>
                    <ion-icon name="arrow-forward-circle"></ion-icon>
                </div>
                <div class="total">
                    $${item.inCart * item.price}.00
                </div>
                `

    });

    productContainer.innerHTML += `
                <div class="basketTotalContainer">
                <h4 class="basketTotalTitle">
                    Total
                </h4>
                <h4 class="basketTotal">
                $${cartCost}.00
                </h4>
            `;
  };
};

function removeItem(productContainer) {
  // Removes an element from the document.
  var element = document.getElementById(productContainer);
  element.parentNode.removeChild("${item.price}");

}




onLoadCartNumbers();
displayCart();

var swiper = new Swiper('.swiper-container', {
  effect: 'coverflow',
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: 'auto',
  coverflowEffect: {
    rotate: 20,
    stretch: 0,
    depth: 200,
    modifier: 1,
    slideShadows: true,
  },
  loop: true
});

Answer 1

第一个问题是，我注意到您的函数removeItem是在另一个函数中定义的。但是通过这种方式，当单击相关元素时，无法从HTML中找到此函数，这意味着将引发错误，并且不会删除任何内容。

首先，将removeItem放在displayCart函数之外。

至于localStorage问题，我真的无法从您发布的代码中猜测任何问题。尝试使用控制台记录cartItems，它们看起来正确吗？（应用更改后，我当然提到了）。

JavaScript-从本地存储中添加和删除项目

1 个答案: