Question

我的购物车总价有问题。从理论上讲，每当我按下“购买”按钮时，该函数就应该更新总数，但它只是替换价格。

它不是执行0 +价格+价格+价格+ ...，而是执行0 +价格，然后再次执行0 +价格。

我该如何解决？

function buy(id) {

  var total = 0;
  for (var i in albums) {
    if (albums[i].id == id) {
      if (albums[i].quantity > 0) {
        albums[i].quantity--;
        total += albums[i].price;
      }
    }
  }


  for (var i in singles) {
    if (singles[i].id == id) {
      if (singles[i].quantity > 0) {
        singles[i].quantity--;
        total += singles[i].price;
      }
    }
  }

  for (var i in soundtracks) {
    if (soundtracks[i].id == id) {
      if (soundtracks[i].quantity > 0) {
        soundtracks[i].quantity--;
        total += soundtracks[i].price;
      }
    }
  }

  document.getElementById('purchases').innerHTML = total;
}

<button onClick='buy("+this.id+")'>Buy</button>

Answer 1

每次单击按钮时，您都在呼叫buy function。在该函数中，您需要声明var total = 0。这就是为什么它总是以0开头的原因。您应该声明总数而不是0，而是使用先前的数字。在您的情况下，该名称来自document.getElementById('purchases').innerHTML。所以 total = document.getElementById('purchases').innerHTML，或将var total = 0移出功能。

Answer 2

我将total移出了其他人指出的位置，但是我也进行了一些重构以消除重复的逻辑。

//moved the total outside of the method so it is not reinitialized
//as others have already mentioned
var total = 0;

//also reduced your repeated logic
function totalElements (elements, id) {
  elements.forEach(function(element){
    if (element.id == id && element.quantity > 0) {
      element.quantity--;
      total += element.price;
    }
  });
}

function buy(id) {
  totalElements(albums, id);
  totalElements(singles, id);
  totalElements(soundtracks, id);

  document.getElementById('purchases').innerHTML = total;
}

<button onClick='buy("+this.id+")'>Buy</button>

Javascript：如何计算总数

2 个答案: