我想将商品添加到我的购物车并将其显示在列表中。 我的代码似乎不起作用 这是git hub链接: GitHub
var cart = {};
function addToCart(product){
var productName = product.getAttribute("data-name");
var price = product.getAttribute("data-price");
cart[productName] = price;
alert(productName + " successfully added to cart");
console.log(cart);
sessionStorage.setItem("myCart", JSON.stringify(cart));
}
function getCart(){
var test = sessionStorage.getItem("myCart");
console.log(JSON.parse(test));
}
function clearCart(){
sessionStorage.removeItem("myCart");
}
function display(){
var cart = JSON.parse(sessionStorage.getItem("myCart"));
var content='';
for (var key in cart) {
var name = key; //B
var price = cart[key]; //15
content += '<tr><td>'+name+'</td><td>'+price+'</td></tr>';
}
document.getElementById("cartTable").innerHTML = content;
}
<h1>My Cart</h1>
<table id="cartTable">
<tr>
<td>Name</td>
<td>Price</td>
</tr>
</table>
<!-- Code from index.html -->
<button id="prodA" data-name="A" data-price="10" onclick="addToCart(this)">Add to cart</button>
<!-- end of code -->
<button id="tCart" onclick="display()">View</button>
<button id="getCart" onclick="getCart()" ><a href="cart.html">View Cart</a></button>
答案 0 :(得分:0)
我建议您将购物车从一个对象更改为一个数组,然后将产品直接推入购物车。
执行此操作后,将“ display()”函数更改为以下形式:
function display() {
var cart = JSON.parse(sessionStorage.getItem("myCart"));
var content = document.getElementById("cartTable");
content.innerHTML = cart.map(product => {
return '<tr><td>' + product.name + '</td><td>' + product.price + '</td></tr>';
}).join('');
}