I create several buttons and I give them an id in a loop and I would like that when we click on it, its id is displayed in the console. This is what I tried to do but the program returns the last id assigned after the loop.
for (var i = 0; i < 3; i++) {
var button = document.createElement('button');
button.textContent = "Add to cart";
button.setAttribute("data-id", i+1);
card.appendChild(button);
button.onclick = function() {
let attribut = button.getAttribute("data-id");
console.log(attribut)
};
}
When the onclick gets called, button is still set to the last button in your loop; there's no reference to button in your onclick. Instead, try passing the event (e) into the onclick, then reference the event's target with e.target.
for (var i = 0; i < 3; i++) {
var button = document.createElement('button');
button.textContent = "Add to cart";
button.setAttribute("data-id", i+1);
document.body.appendChild(button);
button.onclick = function(e) {
let attribut = e.target.getAttribute("data-id");
console.log(attribut)
};
}