ReferenceError: "function" is not defined

Question

I am getting the error "ReferenceError: AddtoCart is not defined" on my shopping basket add to cart code. The button is executed on an onlick. My Javascript is:

        <script type="text/javascript">
         var basket = [];

// display basket and fill cells
function displaybasket() {
    var shoppingBasketTblBody = document.getElementById("shoppingBasketTblBody");
    while (shoppingBasketTblBody.rows.length > 0) {
        shoppingBasketTblBody.deleteRow(0);
    }

    var basket_total = 0.00;

    //populating the table

    for (var product in basket) {
        var removeButton = document.createElement('input');
        removeButton.type = 'button';
        removeButton.value = 'X';
        removeButton.onclick = removeItem;
        /* could not work out how to implement without using cookies, ran out of time.
        var addButton = document.createElement('input');
        addButton.type = 'button'; 
        addButton.value = '+';
        addButton.onclick = 'addItem';
        var minusButton = document.createElement('input');
        minusButton.type = 'button'; 
        minusButton.value = '-';
        minusButton.onclick = 'minusItem;' */
        var row = shoppingBasketTblBody.insertRow();
        var cellName = row.insertCell(0);
        var cellDescription = row.insertCell(1);
        var cellPrice = row.insertCell(2);
        var cellAmount = row.insertCell(3);
        var cellRemove = row.insertCell(4);
        cellPrice.align = "right";
        cellName.innerHTML = basket[product].Name;
        cellDescription.innerHTML = basket[product].Description;
        cellPrice.innerHTML = "£" + basket[product].Price.toFixed(2);
        cellAmount.innerHTML = basket[product].Quantity;
        cellRemove.appendChild(removeButton);
        basket_total += parseFloat(basket[product].Price);
        console.log(basket_total);
    }
    // display total cost
    document.getElementById("cart_total").innerHTML = "£" + basket_total.toFixed(2);
}


function AddtoCart(name, Description, price, Quantity) {
    //create product
    var item = {};
    item.Name = name;
    item.Description = Description;
    item.Price = parseFloat(price);
    item.Quantity = Quantity;
    //push to basket
    basket.push(item);
    //call display basket function
    displaybasket();
}

function removeAll() {
    basket.length = 0.0;
    basket_total = 0.00;
    document.getElementById("shoppingBasketTblBody").deleteRow();
}

function removeItem(i) {
    foodList.splice(i, 1); // remove element at position i
    var newFood = "";
    for (var i = 0; i & lt; foodList.length; i++) {
        newFood += "<a href='#' onClick='removeRecord(" + i + ");'>X</a> " + foodList[i] + " <br>";
    };
    document.getElementById('foods').innerHTML = newFood;
}

/*could not work out how to implement without using cookies, ran out of time.
function addItem() {

}   

function minusItem() {

}*/

The button code is:

 <button type="button" onclick="AddtoCart('{Product}','{Description}','{price}','1')">Add one to cart</button>

Product, Description, price are passed from XML.

Answer 1

The for loop in your removeItem function is invalid. AddtoCart working perfectly in the following code snippet.

var basket = [];

// display basket and fill cells
function displaybasket() {
  var shoppingBasketTblBody = document.getElementById("shoppingBasketTblBody");
  while (shoppingBasketTblBody.rows.length > 0) {
    shoppingBasketTblBody.deleteRow(0);
  }

  var basket_total = 0.00;

  //populating the table

  for (var product in basket) {
    var removeButton = document.createElement('input');
    removeButton.type = 'button';
    removeButton.value = 'X';
    removeButton.onclick = removeItem;
    /* could not work out how to implement without using cookies, ran out of time.
		var addButton = document.createElement('input');
		addButton.type = 'button'; 
		addButton.value = '+';
		addButton.onclick = 'addItem';
        var minusButton = document.createElement('input');
		minusButton.type = 'button'; 
		minusButton.value = '-';
		minusButton.onclick = 'minusItem;' */
    var row = shoppingBasketTblBody.insertRow();
    var cellName = row.insertCell(0);
    var cellDescription = row.insertCell(1);
    var cellPrice = row.insertCell(2);
    var cellAmount = row.insertCell(3);
    var cellRemove = row.insertCell(4);
    cellPrice.align = "right";
    cellName.innerHTML = basket[product].Name;
    cellDescription.innerHTML = basket[product].Description;
    cellPrice.innerHTML = "£" + basket[product].Price.toFixed(2);
    cellAmount.innerHTML = basket[product].Quantity;
    cellRemove.appendChild(removeButton);
    basket_total += parseFloat(basket[product].Price);
    console.log(basket_total);
  }
  // display total cost
  document.getElementById("cart_total").innerHTML = "£" + basket_total.toFixed(2);
}


function AddtoCart(name, Description, price, Quantity) {
  //create product
  var item = {};
  item.Name = name;
  item.Description = Description;
  item.Price = parseFloat(price);
  item.Quantity = Quantity;
  //push to basket
  basket.push(item);
  //call display basket function
  displaybasket();
}

function removeAll() {
  basket.length = 0.0;
  basket_total = 0.00;
  document.getElementById("shoppingBasketTblBody").deleteRow();
}

function removeItem(i) {
  foodList.splice(i, 1); // remove element at position i
  var newFood = "";
  //for (var i = 0; i & lt; foodList.length; i++) {
  //    newFood += "<a href='#' onClick='removeRecord(" + i + ");'>X</a> " + foodList[i] + " <br>";
  //};
  document.getElementById('foods').innerHTML = newFood;
}

/*could not work out how to implement without using cookies, ran out of time.
function addItem() {

}	

function minusItem() {

}*/

<button type="button" onclick="AddtoCart('{Product}','{Description}','{price}','1')">Add one to cart</button>

<table id="shoppingBasketTblBody">
</table>

<p id="demo"></p>
<p id="cart_total"></p>