title: innerHTML doesnt update permanently using a function. It goes back to original value once function is run
body: <p>I have only copied a portion of my code here to simplify for readers. I have a navigation bar on a website with an &quot;Add to Cart&quot; button. I also have 15 products, listed with Selectlist array (for customer to chose quantity) and an array of purchase-buttons (15). Each Purchase Button is already linked to the specific product so that whenever a button is fired, I get the quantity value of that specific product. However, when I am running the function in this code, to update the &quot;Add to Cart&quot; in my Navigation bar, the value returns to 0 once the function is run.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> let purchaseButtonArray=  document.querySelectorAll (".purchase-button")
   
   function purchaseButtonIndex ()
      {for (z in purchaseButtonArray)
      if (purchaseButtonArray[z] == this)
      {productPosition = z}
  qty = Number(productQtyArray[productPosition].value)
  
  let productNumbers = Number(localStorage.getItem("cartNumbers"))
  
  if (productNumbers){
  localStorage.setItem("cartNumbers", productNumbers + qty)
  updateCart.innerHTML = productNumbers + qty}
  
  else {localStorage.setItem("cartNumbers", qty)
  updateCart.innerHTML = qty} 
      }
  
  
   for (x of purchaseButtonArray) 
  x.addEventListener("click",purchaseButtonIndex, false)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;header class="wrapper"&gt;
          &lt;nav class="mainnav" id="topLinks"&gt;
            &lt;ul&gt;
               &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Leagues&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Events &amp; Press&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;button id= "cartbtn"&gt;&lt;img src ="D:\coding\CSS\raunaq-project\placeholder-images\shopping-cart.jpg" &gt;&lt;/button&gt;&lt;span class= "cart"&gt;0&lt;/span&gt;&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/nav&gt;
         
        &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>