JavaScript shopping cart not functioning correctly

I tried coding a webpage with a functional shopping cart, where you can add items, and see the total money. There’s obviously something wrong with my JS, I just don’t know what it is since I’m new to JS. You’re supposed to be able to add items to the cart and see the total amount… I’m unable to add items to cart and see the total. The first function seemed to work but after that none of my JavaScript affected my webpage. I’m assuming I typed something in wrong or I’m missing a few brackets.. etc…

Here’s a link to the tutorial I followed

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

There is a fair amount of code, I’m just going to put my JS here but the complete code can be found on codepen linked below

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

Here’s the 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

In line 53 and 54 you misspelled ‘document’ with ‘deocument’ and you also forgot to some braces. And your code is also bit messy, make it harder to read, since you are a beginner this mistakes are common.

Just go through your code carefully correct your spelling and properly put the braces in correct places. And it will solve most of your problems!

Advertisement

Answer