JS遍历Map渲染元素绑定点击事件仅能获取最后一个值该如何解决？

根因分析 #

你声明的全局变量proteinValue会在forEach遍历Map的过程中被反复重写，遍历结束后它的值固定为Map最后一项טונה对应的23。所有按钮的点击事件都引用同一个全局变量，因此无论点击哪个按钮都只会输出23。

修复方案（推荐自定义属性实现） #

实现逻辑：

1. 渲染按钮时把对应蛋白值存在按钮的data-protein自定义属性中
2. 点击按钮时读取当前触发事件的按钮上的自定义属性即可拿到对应值

修复后完整代码：

// 提前获取挂载列表的DOM元素，原代码缺失该定义需按实际容器修改
const items = document.querySelector('ul');
let currentAccount;

const foods = new Map([
    ['קוטג',23],
    ['ביצה',11],
    ['יוגורט Pro',20],
    ['טונה',23]
]);

foods.forEach(function (value, index) {
  const html = `<li class="">
      <strong>${index}</strong> כמות חלבון ${value}</li><button class="btn btn-primary item-this" data-protein="${value}">הוסף</button><hr>`;
  items.insertAdjacentHTML('afterbegin', html);
});

const itemadd = document.querySelectorAll('.item-this');
for (let i = 0; i < itemadd.length; i++) {
  itemadd[i].addEventListener('click', function () {
    // 读取当前点击按钮的自定义属性值
    console.log(this.dataset.protein);
  });
}

其他注意点 #

• 原代码两次声明const itemadd属于重复声明，修复时保留渲染完成后的那一次即可
• 注意确保items变量指向你实际要插入列表的DOM容器，否则插入元素会报错

内容的提问来源于stack exchange，提问作者user12615060