title: Increment, Decrement, Remove and Count UI Functions :: Unfortunately not Working
body: <p>Please see below my HTML and Javascript code:</p>
  <p>HTML:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
      &lt;title&gt;Shopping Cart&lt;/title&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot; type=&quot;text/css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/v5.7.0/css/all.css&quot;
          integrity=&quot;sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ&quot; crossorigin=&quot;anonymous&quot; /&gt;
      &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav class=&quot;top_nav&quot;&gt;
          &lt;img src=&quot;images/Logo.png&quot; alt=&quot;Logo&quot; id=&quot;logo&quot; /&gt;
  
          &lt;div id=&quot;mySidenav&quot; class=&quot;sidenav&quot;&gt;
              &lt;a href=&quot;javascript:void(0)&quot; class=&quot;closebtn&quot; onclick=&quot;closeNav()&quot;&gt;&amp;times;&lt;/a&gt;
              &lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;
              &lt;a href=&quot;AboutUs.html&quot;&gt;About Us&lt;/a&gt;
              &lt;a href=&quot;Catalogue.html&quot;&gt;Catalogue&lt;/a&gt;
              &lt;a href=&quot;ContactUs.html&quot;&gt;Contact Us&lt;/a&gt;
          &lt;/div&gt;
          &lt;span id=&quot;hamburger&quot; onclick=&quot;openNav()&quot;&gt;&amp;#9776;&lt;/span&gt;
  
          &lt;div id=&quot;search_bar&quot;&gt;
              &lt;input type=&quot;search&quot; placeholder=&quot;search...&quot; /&gt;
              &lt;button&gt;&lt;i class=&quot;fas fa-search&quot;&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;!-- Created a shopping cart button that shows how many items are in the basket. --&gt;
          &lt;div&gt;
              &lt;a href=&quot;ShoppingCart.html&quot; class=&quot;button&quot; id=&quot;cart-button&quot;&gt;
                  &lt;i class=&quot;fas fa-shopping-cart&quot; id=&quot;cart&quot;&gt;&lt;/i&gt;
                  &lt;span class=&quot;amount-products badge badge-warning carttotal&quot; id=&quot;lblCartCount&quot; onchange=&quot;countCart()&quot;&gt;0&lt;/span&gt;
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;!-- Created a &lt;div&gt; so that the page can be populated by dynamically created elements. --&gt;
      &lt;div id=&quot;populatecart&quot;&gt;
          &lt;h1&gt;Shopping Cart&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;p&gt; &amp;copy; Hyperion Development.&amp;nbsp;&amp;nbsp; All Rights Reserved.&amp;nbsp;&amp;nbsp; Proudly created by &lt;a
                  href=&quot;http://www.hyperiondev.com&quot;&gt;Hyperion Development&lt;/a&gt;&lt;/p&gt;
      &lt;/footer&gt;
  
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>// Navigation bar ***
  // Function to display the side navigation area.
  function openNav() {
      document.getElementById(&quot;mySidenav&quot;).style.width = &quot;250px&quot;;
  }
  // Function to close the side navigation area.
  function closeNav() {
      document.getElementById(&quot;mySidenav&quot;).style.width = &quot;0&quot;;
  }
  
  // Shopping cart ***
  // Created a map array for items to be displayed in cart.
  let cart = []
  // Function to stringify and set items in local storage.
  function saveCart() {
      localStorage.setItem(&quot;cart&quot;,
          JSON.stringify(cart)
      )
  }
  // Function to parse and get items from local storage.
  function loadCart() {
      cart = JSON.parse(localStorage.getItem(&quot;cart&quot;))
      if (cart === null) {
          cart = []
      }
  }
  // Called loadCart function.
  loadCart()
  // Created a constructor function to add items to the cart.
  class Plant {
      constructor(name, image, price) {
          this.name = name
          this.image = image
          this.price = price
          this.count = 1
      }
  }
  // Created the new products and included the names, images and prices.
  let plant1 = new Plant(
      &quot;Agapanthus (Purple Cloud/ African Lily)&quot;,
      &quot;images/Agapanthus.jpg&quot;,
      95,
  );
  let plant2 = new Plant(
      &quot;Sweet Alyssum (Royal Carpet)&quot;,
      &quot;images/Alyssum.jpg&quot;,
      25,
  );
  let plant3 = new Plant(
      &quot;Clivia (Natal Lily/ Bush Lily)&quot;,
      &quot;images/Clivia.jpg&quot;,
      95,
  );
  let plant4 = new Plant(
      &quot;Dianthus (Ideal Select Violet)&quot;,
      &quot;images/Dianthus.jpg&quot;,
      45,
  );
  let plant5 = new Plant(
      &quot;Dahlia (Dreamy Eyes)&quot;,
      &quot;images/Dahlia.jpg&quot;,
      40,
  );
  let plant6 = new Plant(
      &quot;African Daisy (Bright Lights Yellow)&quot;,
      &quot;images/Daisy.jpg&quot;,
      50,
  );
  let plant7 = new Plant(
      &quot;Marigold (Honeycomb)&quot;,
      &quot;images/Marigold.jpg&quot;,
      35,
  );
  let plant8 = new Plant(
      &quot;Petunia (Supercal Neon Rose)&quot;,
      &quot;images/Petunia.jpg&quot;,
      45,
  );
  // Created products array.
  let myPlants = [plant1, plant2, plant3, plant4, plant5, plant6, plant7, plant8];
  // Function to add and increase items in the cart.
  function addCart(name, image, price) {
      // Looping through products in order to add or increase products.
      for (let i = 0; i &lt; cart.length; i++) {
          if (cart[i].name === name) {
              cart[i].count += 1
              saveCart()
              return
          }
      }
      let plant = new Plant(name, image, price)
      cart.push(plant)
      saveCart()
  }
  // Function to remove and decrease items in the cart.
  function removePlant(name, count = 1) {
      // Looping through products in order to remove or decrease products.
      for (let i = 0; i &lt; cart.length; i++) {
          let plant = cart[i];
          if (plant.name === name) {
              if (plant.count &gt; count) {
                  plant.count -= count
              } else {
                  cart.splice([i], 1)
              }
              break
          }
      }
      saveCart()
  }
  // Function to calculate discount total once a discount code is entered.
  function calculateDiscount(discountCode) {
      if (discountCode === 'petals') {
          return 0.90;
      } else if (discountCode === 'flowers') {
          return 0.75;
      } else if (discountCode === 'fields') {
          return 0.5;
      } else {
          return 0;
      }
  }
  // Function to work out the total costs of the items
  function totalCart() {
      let total = 0
      for (const plant of cart) {
          total +=
              plant.count * plant.price
      }
      return total;
  }
  // Created function to store the amount of items in the navigation bar locally underneath the cart icon. 
   function countCart() {
       let count = 0
       for (const plant of cart) {
           count += plant.count
       }
       return count;
   }
  
  function countCart() {
      let productNumbers = document.getElementById('cartquantity');
      if (productNumbers) {
          document.querySelectorAll(&quot;.carttotal&quot;).textContent = productNumbers;
      }
      saveCart()
  }
  
  // Function using the data attributes assigned in the product html pages to be able to add items by clicking the add-to-cart button.
  function addVisualCart(plant) {
      let name = plant.getAttribute(&quot;data-name&quot;);
      let image = plant.getAttribute(&quot;data-image&quot;);
      let price = plant.getAttribute(&quot;data-price&quot;);
      addCart(name, image, price)
      alert(`${name} was successfully added to the cart. Your total is now R${totalCart()}.00`)
  }
  
  let quantity = 0;
  
  document.getElementById('cartquantity').innerHTML = quantity;
  
  function increaseCount() {
    document.getElementById('cartquantity').innerHTML = ++quantity;
  }
  
  function decreaseCount() {
    document.getElementById('cartquantity').innerHTML = --quantity;
  }
  
  let btns = document.querySelectorAll('.remove');
  btns.forEach(function(btn) {
    btn.addEventListener('click', updateAmount);
  });
  
  function updateAmount() {
    var num = parseInt(document.getElementById('cartquantity').textContent.trim(), 10);
    this.value === &quot;delete&quot; ? num-- : num++;
    document.getElementById('.cartquantity').textContent = num;
  }
  
  // Function to generate a random order reference number when clicking on the &quot;Confirm Order&quot; button.
  function submitOrder() {
      let orderRef = Math.random().toFixed(36).substr(2, 9);
      alert(`Thank you for your order. Your order reference number is ${orderRef}`);
  }
  // Function to display the cart items via the &lt;div&gt; &quot;populatecart&quot; that was created in the shopping cart's HTML page.
  function displayCart() {
      let productContainer = document.getElementById(&quot;populatecart&quot;);
      let total = totalCart()
      if (addCart &amp;&amp; productContainer) {
          Object.values(cart).map(item =&gt; {
              // Dynamically adding the items and elements to the HTML using the productContainer.
              productContainer.innerHTML += `
          &lt;table class=&quot;products&quot;&gt;
              &lt;tr&gt;
                  &lt;th class=&quot;cartimage productheader&quot;&gt;&lt;/th&gt;
                  &lt;th class=&quot;product-name productheader&quot;&gt;PRODUCT&lt;/th&gt;
                  &lt;th class=&quot;price productheader&quot;&gt;PRICE&lt;/th&gt;
                  &lt;th class=&quot;quantity productheader&quot;&gt;QUANTITY&lt;/th&gt;
                  &lt;th class=&quot;total productheader&quot;&gt;TOTAL&lt;/th&gt;
                  &lt;th class=&quot;remove productheader&quot;&gt;&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td class=&quot;productlist&quot;&gt;&lt;img src=${item.image} class=&quot;cartimage&quot; alt=&quot;cartimage&quot;&gt;&lt;/td&gt;
                  &lt;td class=&quot;product-name productlist&quot;&gt;${item.name}&lt;/td&gt;
                  &lt;td class=&quot;price productlist&quot;&gt;R${item.price}&lt;/td&gt;
                  &lt;td class=&quot;quantity productlist&quot;&gt;
                      &lt;button id=&quot;increasecount&quot; class=&quot;add&quot; onclick=&quot;increaseCount()&gt;&lt;i class=&quot;fas fa-caret-square-up&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                      &lt;p id=&quot;cartquantity&quot; class=&quot;productcount productlist&quot;&gt;${item.count}&lt;/p&gt;
                      &lt;button id=&quot;decreasecount&quot; class=&quot;delete&quot; onclick=&quot;decreaseCount()&quot;&gt;&lt;i class=&quot;fas fa-caret-square-down&quot;&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/td&gt;
                  &lt;td class=&quot;total productlist&quot;&gt;R${item.price * item.count},00&lt;/td&gt;
                  &lt;td class=&quot;productlist&quot;&gt;&lt;button class=&quot;remove&quot; value=&quot;delete&quot; onclick=&quot;removePlant()&quot;&gt;&lt;i class=&quot;fas fa-trash-alt&quot;&gt;&lt;/i&gt; Remove&lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;`
          });
          // Dynamically adding the vat and other totals and select elements to the HTML using the productContainer.
          productContainer.innerHTML += `
          &lt;form id=&quot;formcontainer&quot;&gt; 
          &lt;div class=&quot;discount&quot;&gt;
              &lt;label id=&quot;discountlabel&quot;&gt;Do you have a discount code?&lt;/label&gt;
              &lt;input id=&quot;discountinput&quot; placeholder=&quot; --- Enter code here ---&quot;/&gt;
              &lt;button id=&quot;discountbutton&quot; onclick=&quot;discountTotal()&quot;&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
          &lt;label id=&quot;dropdownlabel&quot;&gt;Is this for yourself or a gift for someone else's garden?:&lt;/label&gt;
          &lt;select id=&quot;dropdown&quot;&gt;
          &lt;/select&gt; 
          &lt;div id=&quot;collectordelivery&quot;&gt;
              &lt;label&gt;How would you like to receive your order?&lt;/label&gt;&lt;br /&gt;
              &lt;input type=&quot;radio&quot; name=&quot;getitmethod&quot; id=&quot;collection&quot; value=&quot;collection&quot; onclick=&quot;deliveryOrCollection()&quot;/&gt;Collection (Free of charge)&lt;br /&gt;
              &lt;input type=&quot;radio&quot; name=&quot;getitmethod&quot; id=&quot;delivery&quot; value=&quot;delivery&quot; onclick=&quot;deliveryOrCollection()&quot;/&gt;Delivery
          &lt;/div&gt;
          &lt;div id=&quot;deliveryoptions&quot;&gt;
              &lt;label&gt;Select the preferred delivery option:&lt;/label&gt;&lt;br /&gt;
              &lt;input id=&quot;EcoD&quot; value=&quot;15.00&quot; type=&quot;radio&quot; class=&quot;deliveryinput&quot;/&gt; Economy Delivery (5-7 working days) at R15.00&lt;br /&gt;
              &lt;input id=&quot;StdD&quot; value=&quot;25.00&quot; type=&quot;radio&quot; class=&quot;deliveryinput&quot;/&gt; Standard Delivery (2-4 working days) at R25.00&lt;br /&gt;
              &lt;input id=&quot;ExpD&quot; value=&quot;50.00&quot; type=&quot;radio&quot; class=&quot;deliveryinput&quot;/&gt; Expedited Delivery (1-2 working days) at R50.00
          &lt;/div&gt;
          &lt;/form&gt;
          &lt;div id=&quot;vattotalcontainer&quot;&gt; 
              &lt;h4 id=&quot;vattotaltitle&quot;&gt;VAT:&lt;/h4&gt;
              &lt;h4 id=&quot;vattotal&quot;&gt;R${total * 0.15}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div id=&quot;baskettotalcontainer&quot;&gt;
              &lt;h4 id=&quot;baskettotaltitle&quot;&gt;Total:&lt;/h4&gt;
              &lt;h4 id=&quot;baskettotal&quot;&gt;R${total},00&lt;/h4&gt;
          &lt;/div&gt;
          &lt;button id=&quot;submitorder&quot; onclick=&quot;submitOrder()&quot;&gt;Confirm Order&lt;/button&gt;`
      }
  }
  // Function to calculate the discount total and to dedust this from the order total.
  function discountTotal() {
      let discountCode = document.getElementById(&quot;discountinput&quot;).value;
      let total = document.getElementById(&quot;baskettotal&quot;);
      total.innerHTML = &quot;R&quot; + totalCart() * calculateDiscount(discountCode);
  }
  
  displayCart();
  
  
  // jQuery ***
  $(document).ready(function () {
  
      $('.quantity').each(function() {
          var $this = $(this);
          var $input = $this.find('.productcount');
          $this.on('click', '.add', function() {
            var val = parseInt($input.val());
            $input.val(++val);
          }).on('click', '.delete', function() {
            var val = parseInt($input.val());
            $input.val(--val);
          });
        });
  // Created the dropdown options via jQuery with this function
      let myOptions = {
          select : '--- Please select ---',
          forme : 'This is for me.',
          gift : 'This is a gift. Please do not include a slip.'
      };
      let mySelect = $('#dropdown');
      $.each(myOptions, function(val, text) {
          mySelect.append(
              $('&lt;option&gt;&lt;/option&gt;').val(val).html(text)
          );
      });
  
      // Created function to hide and show the delivery functions when someone selects either collect or delivery.
      $(&quot;#deliveryoptions&quot;).hide();
      $('input[name=&quot;getitmethod&quot;]').click(function () {
          $(&quot;#deliveryoptions&quot;).hide();
          if ($('input[name=&quot;getitmethod&quot;]').is(':checked')) {
              let radioValue = $(&quot;input[name='getitmethod']:checked&quot;).val();
              if (radioValue === &quot;delivery&quot;) {
                  $(&quot;#deliveryoptions&quot;).show();
              } else {
                  $(&quot;#deliveryoptions&quot;).hide();
              }
          }
      });
  });
  
  //Created a function for the bee to &quot;fly on the &quot;Catalogue page&quot;.
  $(document).keydown(function (key) {
      switch (parseInt(key.which, 10)) {
          // Left arrow pressed.
          case 37:
              $('.buzzerbee').stop().animate({
                  left: &quot;-=200px&quot;
              }, 'fast');
              break;
              // Up arrow pressed.
          case 38:
              $('.buzzerbee').stop().animate({
                  top: '-=200px'
              }, 'fast');
              break;
              // Right arrow pressed.
          case 39:
              $('.buzzerbee').stop().animate({
                  left: '+=200px'
              }, 'fast');
              break;
              // Down arrow pressed.
          case 40:
              $('.buzzerbee').stop().animate({
                  top: '+=200px'
              }, 'fast');
              break;
      }
  })
  
  // Created function to hide or show the product summary table on the &quot;Catalogue&quot; page.
  $(&quot;#hide&quot;).click(function () {
      $(&quot;table&quot;).hide(1000);
  });
  $(&quot;#show&quot;).click(function () {
      $(&quot;table&quot;).show(1000);
  });
  
  // Created a chained function for the view our catalogue header on the &quot;About Us&quot; page.
  $(&quot;#seeheaderbetter&quot;).click(function () {
      $(&quot;#viewcatalogue&quot;).css(&quot;color&quot;, &quot;#05520f&quot;).animate({
              width: &quot;100%&quot;
          })
          //Enlarges the font size and makes the element bigger.
          .animate({
              fontSize: &quot;46px&quot;
          })
          .animate({
              borderWidth: 30
          });
  });
  </code></pre>
  <p>I am trying to action the increment, decrement and remove functions, but am unfortunately not having any success. I was told that the increment and decrement functions can be actioned by calling the addCart and the removePlant functions, because they essentially do the same thing.</p>
  <p>The functions should be executed by clicking on the respective buttons. I have tried adding eventListeners to the Javascript and by referencing onclick in the HTML elements, but nothing is happening. When I test addCart and removePlant in console.log it works perfectly. It is just to action it in the UI.</p>
  <p>I am also having trouble populating the cart's badge counter, via the countCart function, on the navigation bar. I have tried the same as above (eventListeners and HTML onclick), as it should also be actioned by a button, but it is unfortunately not displaying.</p>
  <p>I would appreciate it if anyone can point me in the right direction implementing these functions.</p>