JavaScript购物车无法正常工作

Question

我试着用一个功能性购物车编码一个网页，在那里你可以添加商品，并查看总金额。我的JS显然有问题，我只是不知道它是什么，因为我是JS的新手。你应该能够将商品添加到购物车中，并查看总金额。。。我无法将项目添加到购物车并查看总数。第一个函数似乎可以工作，但在那之后，我的JavaScript都没有影响我的网页。我想我打错了什么，或者我少了几个括号。。等等。

这里有一个链接到我遵循的教程

https://www.youtube.com/watch?v=0I1TorcXFP0&list=PLnHJACx3NwAey1IiiYmxFbXxieMYqnBKF&索引=5

有相当多的代码，我只是想把我的JS放在这里，但完整的代码可以在下面链接的代码笔上找到

https://codepen.io/jlcdevdesign/pen/GRqxBzz

这是JS

(function() {
const cartInfo = document.getElementById("cart-info");
const cart = document.getElementById("cart");
cartInfo.addEventListener("click", function() {
cart.classList.toggle("show-cart");
})
})();
(function(){
const cartBtn = document.querySelectorAll(".store-item-icon");
cartBtn.forEach(function(btn){
btn.addEventListener("click", function(event)){

//console.log(event.target);
if(event.target.parentElement.classList("store-item-icon"))
{
let fullPath = 
event.target.parentElement.previousElementSibling.src;
let pos = fullPath.indexOf("img") + 3;
let partPath = fullPath.slice(pos);
const item = {};
item.img = 'img-cart${}partPath';
let name = event.target.parentElement.parentElement.nextElementSibling.children[0].children[0].textContent;
item.name = name;
let price = event.target.parentElement.parentElement.nextElementSibling.children[0].children[1].textContent;
let finalPrice = price.slice(1).trim();
item.price = finalPrice;
const cartItem = document.getElementById('div')
cartItem.classList.add('cart-item', 'd-flex', 'justify-content-between', 'text-capitalize', 'my-3');
cartItem.innerHTML = '
<img src="${item.img}" class="img-fluid rounded-circle" id="item-img" alt="">
<div class="item-text">
<p id="cart-item-title" class="font-weight-bold mb-0">${item.name}</p>
<span>$</span>
<span id="cart-item-price" class="cart-item-price" class="mb-0">${item.price}</span>
</div>
<a href="#" id='cart-item-remove' class="cart-item-remove">
<i class="fas fa-trash"></i>
</a>
</div>

';
const cart = deocument.getElementById('cart');
const total = deocument.querySelector('.cart-total-container');
cart.insertBefore(cartItem, total);
alert("item added to the cart");
showTotals();
}
});

})
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,items){
total += item;
return total;
}, 0)
const finalMoney = totalMoney.toFixed(2);
document.getElementById('cart-total').textContent = finalMoney;
document.querySelector('.item-total').textContent = finalMoney;
document.getElementById('item-count').textContent = total.length;
}
})();

Answer 1

在第53行和第54行中，您将"document"拼写为"deocument"，还忘记了使用大括号。而且你的代码也有点乱，让它更难阅读，因为你是一个初学者，这种错误很常见。

只需仔细检查代码，纠正拼写，并将大括号正确放置在正确的位置。它将解决你的大部分问题！

Answer 2

我访问了您的网站，发现了很多错误。你的代码也很奇怪，看起来就像是复制粘贴的，如果你真的是一个工程师，或者没有做过太多的项目，那么你应该尝试构建一些简单的东西，比如我初学者时创建的Rock Paper Scissor游戏(简单rps.vercel.app(。

(我在那里提供的所有链接都是我的旧项目，你不必检查它们。(你可以按ctrl + u查看代码，然后复制代码并将其粘贴到代码编辑器中，这样它就可以获得一些颜色。然后试着阅读代码，了解事情是如何运作的，然后试着构建自己的代码。你不应该遵循2年前的教程。

相反，你应该关注一些YouTube频道，如Mosh编程和在线教程。