我收到错误" ReferenceError:AddtoCart未定义"在我的购物篮中添加购物车代码。按钮在onlick上执行。我的Javascript是:
<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() {
}*/
按钮代码为:
<button type="button" onclick="AddtoCart('{Product}','{Description}','{price}','1')">Add one to cart</button>
产品,说明,价格从XML传递。
答案 0 :(得分:1)
removeItem
功能中的for循环无效。 AddtoCart
在以下代码段中完美运行。
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>
答案 1 :(得分:0)
var cellAmount = row.insertCell(3)
中缺少分号。如上所述,您应该正确缩进代码。
编辑:此外,在脚本的末尾似乎还有一个额外的}
。
for (var i = 0; i & lt; foodList.length; i++)
中的removeItem()
有两个问题:
i
已定义。你不应该在循环中重新设计它。