当我按下按钮时，它会给我一个结果，而不是我拥有的所有地图结果。 我只得到值 1

Question

I need help.

There's something in the code that's not working properly for me.

When I press a button it pulls me value of value of one product and every other button just does not pull their figure.

const itemadd = document.querySelectorAll('.item-this');
let currentAccount;
let proteinValue;

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


foods.forEach(function (value, index, arr) {
  const html = `<li class="">
      <strong>${index}</strong> כמות חלבון ${(proteinValue =
    value)}</li><button class="btn btn-primary item-this">הוסף</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(proteinValue);
  });

When I press the button it only records the figure of ['tuna', 23] Intention 23 and all the other entries do not print them for me that I press the button

Answer 1

You can attach event handler to the button directly and pass the corresponding value.

let currentAccount={};
let proteinValue;

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


foods.forEach(function(value,index,arr){

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

})

function test(val){
    console.log(val);
}

or with eventListener, you can use data attribute.

let currentAccount={};
let proteinValue;

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


foods.forEach(function(value,index,arr){

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

})

document.querySelectorAll('.btn-primary').forEach((ele) => {
    ele.addEventListener('click', function(e){
        console.log(e.target.getAttribute('data-protein'))
    })
})