title: html add cart, basket and checkout javascript
body: <p>can you someone to fix add cart to basket and checkout. the shopping cart cant be add the item in to the basket the javascript show me null if i try to add. all codes i have been post. thank you in advance. 
  cart.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Shopping Cart Pure Javascript&lt;/title&gt;
  &lt;script type="text/javascript" src="js.js"&gt;&lt;/script&gt; 
  &lt;/head&gt;
  &lt;body&gt;
  &lt;br&gt;
  &lt;p id="demo"&gt;&lt;table border="1|1"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;Product ID&lt;/td&gt;&lt;td&gt;Product Description&lt;/td&gt;&lt;td&gt;Quantity&lt;/td&gt;&lt;td&gt;Price&lt;/td&gt;&lt;td&gt;Action&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;GPS&lt;/td&gt;&lt;td&gt;Gps tracker&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;&lt;button type="submit" onclick='deleteProduct("GPS", this);'&gt;Delete Item&lt;/button&gt; &amp;nbsp; &lt;button type="submit" onclick='addCart("GPS", this);'&gt;Add to Cart&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Alarm&lt;/td&gt;&lt;td&gt;Alarm door&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;&lt;button type="submit" onclick='deleteProduct("Alarm", this);'&gt;Delete Item&lt;/button&gt; &amp;nbsp; &lt;button type="submit" onclick='addCart("Alarm", this);'&gt;Add to Cart&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Car&lt;/td&gt;&lt;td&gt;Toyota&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;200&lt;/td&gt;&lt;td&gt;&lt;button type="submit" onclick='deleteProduct("Car", this);'&gt;Delete Item&lt;/button&gt; &amp;nbsp; &lt;button type="submit" onclick='addCart("Car", this);'&gt;Add to Cart&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/p&gt; &lt;br&gt;
  &lt;h2&gt; Shopping Cart &lt;/h2&gt;
  &lt;p id="demo2"&gt;&lt;/p&gt;
  &lt;h2&gt;Grand Total:&lt;/h2&gt;
  &lt;p id="demo3"&gt;&lt;/p&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>js.js page contain javascript code auto calculate add to cart and auto delete auto sum and more function but now it became null</p>
  
  <pre><code>var products = [];
      var cart = [];
  
  
          function deleteProduct(product_id, e) {
              e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
              for (var i = 0; i &lt; products.length; i++) {
                  if (products[i].product_id == product_id) {
                      // DO NOT CHANGE THE 1 HERE
                      products.splice(i, 1);
                  }
              }
          }
  for (var i = 0; i &lt; products.length; i++) {
              var productID = document.getElementById("productID").value;
              var product_desc = document.getElementById("product_desc").value;
              var qty = document.getElementById("quantity").value;
              var price = document.getElementById("price").value;
  
  }
          function addCart(productID) {
              for (var i = 0; i &lt; products.length; i++) {
                  if (products[i].product_id == product_id) {
                      var cartItem = null;
                      for (var k = 0; k &lt; cart.length; k++) {
                          if (cart[k].product.product_id == products[i].product_id) {
                              cartItem = cart[k];
                              cart[k].product_qty++;
                              break;
                          }
                      }
                      if (cartItem == null) {
  
                          var cartItem = {
                              product: products[i],
                              product_qty: products[i].product_qty 
                          };
                          cart.push(cartItem);
                      }
                  }
              }
  
              renderCartTable();
  
          }
  
          function renderCartTable() {
          var html = '';
          var ele = document.getElementById("demo2");
          ele.innerHTML = ''; 
  
          html += "&lt;table id='tblCart' border='1|1'&gt;";
          html += "&lt;tr&gt;&lt;td&gt;Product ID&lt;/td&gt;";
          html += "&lt;td&gt;Product Description&lt;/td&gt;";
          html += "&lt;td&gt;Quantity&lt;/td&gt;";
          html += "&lt;td&gt;Price&lt;/td&gt;";
          html += "&lt;td&gt;Total&lt;/td&gt;";
          html += "&lt;td&gt;Action&lt;/td&gt;&lt;/tr&gt;";
          var GrandTotal = 0;
          for (var i = 0; i &lt; cart.length; i++) {
              html += "&lt;tr&gt;";
              html += "&lt;td&gt;" + cart[i].product.product_id + "&lt;/td&gt;";
              html += "&lt;td&gt;" + cart[i].product.product_desc + "&lt;/td&gt;";
              html += "&lt;td&gt;" + cart[i].product_qty + "&lt;/td&gt;";
              html += "&lt;td&gt;" + cart[i].product.product_price + "&lt;/td&gt;";
              html += "&lt;td&gt;" + parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty) + "&lt;/td&gt;";
              html += "&lt;td&gt;&lt;button type='submit' onClick='subtractQuantity(\"" + cart[i].product.product_id + "\", this);'/&gt;Subtract Quantity&lt;/button&gt; &amp;nbsp&lt;button type='submit' onClick='addQuantity(\"" + cart[i].product.product_id + "\", this);'/&gt;Add Quantity&lt;/button&gt; &amp;nbsp&lt;button type='submit' onClick='removeItem(\"" + cart[i].product.product_id + "\", this);'/&gt;Remove Item&lt;/button&gt;&lt;/td&gt;";
              html += "&lt;/tr&gt;";
  
             GrandTotal += parseFloat(cart[i].product.product_price) * parseInt(cart[i].product_qty);            
  
          }
          document.getElementById('demo3').innerHTML = GrandTotal;
          html += "&lt;/table&gt;";
          ele.innerHTML = html;
      }
  
  
          function subtractQuantity(product_id)
          {
  
              for (var i = 0; i &lt; cart.length; i++) {
                  if (cart[i].product.product_id == product_id) {
                      cart[i].product_qty--;
                  }
  
                  if (cart[i].product_qty == 0) {
                      cart.splice(i,1);
                  }
  
              }
              renderCartTable();
          }
          function addQuantity(product_id)
          {
  
              for (var i = 0; i &lt; cart.length; i++) {
                  if (cart[i].product.product_id == product_id) {
                      cart[i].product_qty++;
                  }  
              }
              renderCartTable();
          }
          function removeItem(product_id)
          {
  
              for (var i = 0; i &lt; cart.length; i++) {
                  if (cart[i].product.product_id == product_id) {
                      cart.splice(i,1);
                  }
  
              }
              renderCartTable();
          }
  </code></pre>
  
  <p>why add cart not working? the java <code>null</code> me</p>