addeventlistener 购物车不起作用

Question

我会保持简单，在我的 jsfiddle 中，我有一个使用 javascript 的购物车。我想要的是有人点击按钮，它会添加一个项目到购物车。不幸的是，该函数不会调用 AdditemtoCart ，除非它在让我发疯的函数之外。让我知道我做错了什么。

jsfiddle 链接：https://jsfiddle.net/w2z3rb9h/51/

<div  id="cart" class="glyphicon glyphicon-shopping-cart">
<div id="money">
$</div>
<div id="length">
Items
</div>
</div>

<button name="button" id="addItem">
Add Item
</button> 

HTML Code above

// [(START)Cart]-------->
var cart = [];
// [(END)Cart]---------->


// [(START)Factory]-------->
var Item = function(name, price, count) {
    this.name = name;
    this.price = price;
    this.count = count;
};
// [(END)Cart]-------------->


// [(START)Adding Items to Cart]-------->
function addItemToCart(name, price, count){
for (var key in cart) {
 if (cart[key].name === name) {
         cart[key].count += count;
         cart[key].price += price;
         return;
     }
}

var item = new Item(name, price, count);
cart.push(item);
}
// [(END)Adding Items to Cart]---------->


// [(START)Remove Item From Cart]-------->
function removeItemFromCart(name,price) {
 for(var key in cart) {
     if(cart[key].name === name) {
        cart[key].count --;
        cart[key].price -= price;
     if(cart[key].count === 0) {
        cart.splice(key,1);
     }
        break;
     } 

 }
}
// [(END)Remove Item From Cart]-------->


// [(START)Remove All Item From Cart]-->
function removeItemFromCartAll(name){
  for (var key in cart){
      if(cart[key].name === name){
      cart.splice(key, 1);
      break;
      }

  }
}
// [(END)Remove All Item From Cart]---->



function call() {
addItemToCart("Apple", 1.2, 1);
 alert("It works");
}


document.getElementById("addItem").addEventListener("mousedown", call);



// [(START)Get Cart Amount] ----------->
function cartlength() {
var x = 0;
for (var key in cart) {
  x += cart[key].count;
}
 document.getElementById("length").innerHTML  = "Items:" + x;
}
//Invoked:Get Cart Amount
cartlength();
// [(END)Get Cart Amount] ----------->


// [(START)Price] ------------------->
function cartprice() {
var y = 0;
for (var key in cart) {
  y += cart[key].price;
}
 document.getElementById("money").innerHTML  = "$" + y;
}
//Invoke: Price
cartprice();
// [(END)Price] --------------------->

Answer 1

当您单击addItem 按钮时，它会调用call 函数，并且在addItemToCart 和alert 内部也会调用。您可以在addItemToCart 中添加警报来测试它。项目现在在 cart 数组中。你需要更新cart div，调用cartlength 和cartprice 函数。以这种方式更新call 方法：

function call() {
  addItemToCart("Apple", 1.2, 1);
  cartlength();
  cartprice();
  alert("It works");
}