title: JavaScript shopping cart not functioning correctly
body: <p>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...</p>
  <p>Here's a link to the tutorial I followed</p>
  <p><a href="https://www.youtube.com/watch?v=0I1TorcXFP0&amp;list=PLnHJACx3NwAey1IiiYmxFbXxieMYqnBKF&amp;index=5" rel="nofollow noreferrer">https://www.youtube.com/watch?v=0I1TorcXFP0&amp;list=PLnHJACx3NwAey1IiiYmxFbXxieMYqnBKF&amp;index=5</a></p>
  <p>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</p>
  <p><a href="https://codepen.io/jlcdevdesign/pen/GRqxBzz" rel="nofollow noreferrer">https://codepen.io/jlcdevdesign/pen/GRqxBzz</a></p>
  <p>Here's the JS</p>
  <pre><code>(function() {
  const cartInfo = document.getElementById(&quot;cart-info&quot;);
  const cart = document.getElementById(&quot;cart&quot;);
  
  cartInfo.addEventListener(&quot;click&quot;, function() {
      cart.classList.toggle(&quot;show-cart&quot;);
  })
  })();
  
        (function(){
   const cartBtn = document.querySelectorAll(&quot;.store-item-icon&quot;);
   cartBtn.forEach(function(btn){
   btn.addEventListener(&quot;click&quot;, function(event)){
   
      //console.log(event.target);
  
      if(event.target.parentElement.classList(&quot;store-item-icon&quot;))
      {
         let fullPath = 
         event.target.parentElement.previousElementSibling.src;
         let pos = fullPath.indexOf(&quot;img&quot;) + 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 = '
  
         &lt;img src=&quot;${item.img}&quot; class=&quot;img-fluid rounded-circle&quot; id=&quot;item-img&quot; alt=&quot;&quot;&gt;
         &lt;div class=&quot;item-text&quot;&gt;
  
           &lt;p id=&quot;cart-item-title&quot; class=&quot;font-weight-bold mb-0&quot;&gt;${item.name}&lt;/p&gt;
           &lt;span&gt;$&lt;/span&gt;
      &lt;span id=&quot;cart-item-price&quot; class=&quot;cart-item-price&quot; class=&quot;mb-0&quot;&gt;${item.price}&lt;/span&gt;
         &lt;/div&gt;
         &lt;a href=&quot;#&quot; id='cart-item-remove' class=&quot;cart-item-remove&quot;&gt;
           &lt;i class=&quot;fas fa-trash&quot;&gt;&lt;/i&gt;
         &lt;/a&gt;
       &lt;/div&gt;
         
         ';
         const cart = deocument.getElementById('cart');
         const total = deocument.querySelector('.cart-total-container');
  
         cart.insertBefore(cartItem, total);
         alert(&quot;item added to the cart&quot;);
         showTotals();
      }
   });
  
  
  
   })
  
   function showTotals() {
       const total = [] {
           const items = document.querySelectorAll(&quot;.cart-item-price&quot;);
  
           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;
   }
  })();
  </code></pre>