addEventListener 点击一次不工作多次答案

【问题标题】：addEventListener Click not working multiple times just onceaddEventListener 点击一次不工作多次
【发布时间】：2021-10-28 07:58:14
【问题描述】：

我想在任何事件点击时增加cart.amount 但有一次工作应该是刷新再增加一个：

window.addEventListener("load", () => {
  for (let i = 0; i < amount_btns_up.length; i++) {
    amount_btns_up[i].addEventListener("click", function (e) {
      id = e.target.dataset.amount;
      amount_change_up(id);
    });
  }
});

function amount_change_up(id) {
  mycart = JSON.parse(localStorage.getItem("myCart"));
  for (let j = 0; j < mycart.length; j++) {
    if (mycart[j].ISBN === id) {
      mycart[j].amount++;
      
    }
  }
}

【问题讨论】：

标签： javascript events click dom-events addeventlistener

【解决方案1】：

增加项目数量后，您需要将其保存回本地存储以供该行

JSON.parse(localStorage.getItem("myCart"))

在后续点击中解析更新的数量。

function amount_change_up(id) {
  mycart = JSON.parse(localStorage.getItem("myCart"));
  for (let j = 0; j < mycart.length; j++) {
    if (mycart[j].ISBN === id) {
      mycart[j].amount++;
    }
  }
  localStorage.myCart = JSON.stringify(mycart);
}

您也可以考虑使用语义上更合适的.find 方法。

function amount_change_up(id) {
  mycart = JSON.parse(localStorage.getItem("myCart"));
  mycart.find(item => item.ISBN === id).amount++;
  localStorage.myCart = JSON.stringify(mycart);
}

此外，除非mycart 标识符在脚本的其他地方使用，否则请考虑将其设为局部变量而不是全局变量。 ID 相同。

function amount_change_up(id) {
  const mycart = JSON.parse(localStorage.getItem("myCart"));
  mycart.find(item => item.ISBN === id).amount++;
  localStorage.myCart = JSON.stringify(mycart);
}

window.addEventListener("load", () => {
  for (let i = 0; i < amount_btns_up.length; i++) {
    amount_btns_up[i].addEventListener("click", function (e) {
      amount_change_up(e.target.dataset.amount);
    });
  }
});

我还建议使用DOMContentLoaded 而不是load，这样客户端就不必等待完全下载图像来让您的JS 开始工作。或者，更好的是，在标签上使用带有defer 属性的外部脚本。

【讨论】：