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.