如何有一个元素的数据id，当你点击它?

Question

我创建了几个按钮，并在循环中给它们一个id，我希望当我们单击它时，它的id显示在控制台中。这就是我尝试做的，但是程序返回循环后分配的最后一个id。

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)
};

}

Answer 1

当onclick被调用时，button仍然被设置为循环中的最后一个按钮;你的onclick中没有提到button。相反，尝试将事件(e)传递给onclick，然后使用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)
};
}