Creating a Shopping Cart using only HTML/JavaScript

Question

I'm not sure what to do in order to complete this project. I need to create a shopping cart that uses only one HTML page. I have the table set up showing what is being sold but where I am lost is the JavaScript.

I don't know how to link the "Add to Cart" button with all the necessary data( The name, description, and price) to be able to add it to the cart. I don't need to be able to remove it from the cart, but it does need to show the total. After searching online for a few answers, I've tried some things but just cannot figure it out.

Any help is definitely appreciated because I am completely lost at this point and am new to JavaScript in general.

This is the jsFiddle but that was a little confusing to me, because it's working differently on there than if I just went to Run in Notepad++

jsFiddle: http://jsfiddle.net/renavi/ATjvt/5/

function AddtoCart() {
  console.log('hi');
  var x = document.getElementById('Items');
  var new_row = x.rows[1].cloneNode(true);
  var len = x.rows.length;
  new_row.cells[0].innerHTML = len;
  var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
  inp1.id += len;
  inp1.value = '';
  var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
  inp2.value = '';
  x.appendChild(new_row);
}

The direct file is here

Pastebin: http://pastebin.com/sutGWjSY

Answer 1

You simply need to use simpleCart

It is a free and open-source javascript shopping cart that easily integrates with your current website.

You will get the full source code at github