title: Simple shopping cart using JavaScript Cookie
body: <p>I have following code to implement simple practice shopping cart using <code>JavaScript</code>. There is a checkout link which calls <code>getcookie()</code> to check the value of the cookies stored. When nothing is in the cookie then click on the link  alerts to make input.  If non of the values are entered in the input box and hit &quot;add to cart&quot; then validation is done and error message is alerted.</p>
  <p>For some reason, the cookie is not taking the value from the input field. I tried quite a while now but  was not able to debug the code. Just an empty alert box is shown at last. I appreciate any debugging. Thanks in advance.</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
      var value;
      var productID;
  
      function setItem(abd) {
          value = abd.value;
          productID = abd.getAttribute(&quot;productID&quot;);
          var intRegex = /^\d+$/;
          var numberOfItems;
          if (!intRegex.test(value) || (value &lt;= 0)) {
              alert('Please Enter valid numberofitem');
          } else {
              numberOfItems = value;
          }
      }
      function getCookie() {
          if (value == undefined) {
              alert(&quot;There is nothing in the shopping cart!&quot;);
          } else {
              var cookieArray = document.cookie.split(';');
              var printHolder = &quot;&quot;;
              for (var i = 0; i &lt; cookieArray.length; ++i) {
                  var pairArray = cookieArray[i].split('=');
                  alert(pairArray[0]);
              }
              alert(printHolder);
          }
      }
      function setCookie() {
          if (value == undefined) {
              alert(&quot;Please add number of items in text box&quot;);
          } else {
              document.cookie = productID + &quot;=&quot; + value + &quot;; &quot;;
              alert(value + &quot; Product(s) with id &quot; + productID +
                  &quot; has been added to shopping cart!&quot;);
          }
      }
  
  &lt;/script&gt;
  &lt;a href=&quot;javascript:getCookie()&quot;&gt; Checkout &lt;/a&gt;
  &lt;input name=&quot;item-select&quot; id=&quot;item-select&quot;
         productid=&quot;p001&quot;  style=&quot;width: 50px&quot; onBlur=&quot;setItem(this)&quot; &gt;
  &lt;button type=&quot;button&quot; onclick=&quot;setCookie()&quot;&gt;Add to cart.&lt;/button&gt;
  </code></pre>
  <p>The result I wanted is something like this at last!</p>
  <p><img src="https://i.stack.imgur.com/U0KTj.png" alt="enter image description here" /></p>