我的购物车功能出现问题，无法使用onclick通过图标从本地存储添加和删除商品。我希望X离子图标/按钮可以从购物车/本地存储中完全删除项目，而左右按钮也可以增加项目。我不断得到未定义的引用错误，或者它破坏了另一个函数。似乎我改变得越多，错误就越多，或者只有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
});
我注意到的第一个问题是，您的函数removeItem是在另一个函数中定义的。但是通过这种方式，当单击相关元素时，无法从HTML中找到该函数，这意味着将抛出错误，并且不会删除任何内容。
首先，将removeItem放置在displayCart函数之外。
至于localStorage问题，我真的无法从您发布的代码中猜出任何问题。尝试控制台记录cartItems，它们看起来正确吗？(当然，在应用了我上面提到的更改之后(。