JavaScript 购物车无法正常运行答案

【问题标题】：JavaScript shopping cart not functioning correctlyJavaScript 购物车无法正常运行
【发布时间】：2021-02-13 08:35:40
【问题描述】：

我尝试编写一个带有功能性购物车的网页，您可以在其中添加商品并查看总金额。我的 JS 显然有问题，我只是不知道它是什么，因为我是 JS 新手。您应该能够将商品添加到购物车并查看总金额...我无法将商品添加到购物车并查看总数。第一个功能似乎有效，但之后我的 JavaScript 都没有影响我的网页。我假设我输入了错误的东西，或者我遗漏了几个括号......等等......

这是我遵循的教程的链接

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

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

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;
 }
})();

【问题讨论】：

请提供一些用例，以便社区知道究竟是什么没有按预期工作。一个简单的“这是我的代码，它不起作用”不会向社区传达任何有用的信息。

标签： javascript html jquery css bootstrap-4

【解决方案1】：

我访问了您的网站，发现了很多错误。而且你的代码也很奇怪，看起来你只是复制粘贴，如果你真的是一个初学者或者没有做过太多项目，那么你绝对不应该这样做，你应该尝试构建一些简单的东西，比如石头剪刀布游戏我是初学者时建造的 (simple-rps.vercel.app)。

（我提供的所有链接都是我的旧项目，您不必检查它们。）您可以按ctrl + u查看代码，然后复制代码并粘贴将其放入您的代码编辑器中，以便获得一些颜色。然后尝试阅读代码并了解事情是如何工作的，然后尝试构建自己的代码。而且你不应该遵循那个 2 岁的教程。

相反，您应该关注一些 YouTube 频道，例如 Programming with Mosh 和 Online Tutorials。

【讨论】：

【解决方案2】：

在第 53 行和第 54 行中，您将 'document' 拼错为 'deocument'，并且还忘记了一些大括号。而且你的代码也有点乱，看不懂，因为你是初学者，这个错误很常见。

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

【讨论】：