Javascript 无法从GetElementsByCassName创建单击事件处理程序

不太清楚为什么我不能从getElementsByClassName创建click事件处理程序。我可以填充并查看所有产品的所有呈现html，该按钮的类名为

AddToCart

。但是

addToCart

在

var addToCart=document.getElementsByClassName（“addToCart”）处为空


var产品列表=[
{id:101，产品：“罗技鼠标”，单价：45.0}，
{id:102，产品：“罗技键盘”，单价：50.0}，
{id:103，产品：“HP鼠标”，单价：35.0}
];
常量populateProducts=对象=>{
//启动我们的HTML
var html=“”；
调试器；
//循环对象的成员
object.forEach（函数（项）{
html+=`\
${item.product}
RM${item.unitprice.toFixed（2）}
添加到购物车
`；
});
调试器；
var addToCart=document.getElementsByClassName（“addToCart”）；
Array.prototype.forEach.call（addToCart，函数（元素）{
元素。addEventListener（“单击”，函数（）{
控制台日志（元素）；
});
});
返回html；
};
addEventListener（“加载”，函数（）{
document.getElementById（“productRow”）.innerHTML=populateProducts(
产品列表
);
});
您试图在DOM中存在元素之前连接事件处理程序。在将HTML分配给
innerHTML
之后，需要将连接处理程序的代码移动到

然后，您可以将项目ID存储为按钮上的
数据-*
属性，并通过
.getAttribute（“数据ID”）
（或现代浏览器上的
.dataset.ID
）访问它：


var产品列表=[
{id:101，产品：“罗技鼠标”，单价：45.0}，
{id:102，产品：“罗技键盘”，单价：50.0}，
{id:103，产品：“HP鼠标”，单价：35.0}
];
常量populateProducts=对象=>{
//启动我们的HTML
var html=“”；
//循环对象的成员
object.forEach（函数（项）{
html+=`\
${item.product}
RM${item.unitprice.toFixed（2）}
添加到购物车
`；
});
返回html；
};
addEventListener（“加载”，函数（）{
document.getElementById（“productRow”）.innerHTML=populateProducts(
产品列表
);
var addToCart=document.getElementsByClassName（“addToCart”）；
Array.prototype.forEach.call（addToCart，函数（元素）{
元素。addEventListener（“单击”，函数（）{
log（“通过getAttribute:”，element.getAttribute（“数据id”）；
log（“通过数据集：”，element.dataset.id）；
});
});
});
您想要的元素不在DOM中-您只创建了一个字符串，该字符串恰好包含HTML标记，但元素不在DOM中，因此无法使用
GetElementsByCassName
（或其他任何内容）选择它们

<>而不是创建一个字符串，考虑用<代码> CuraEngult创建实际元素，然后通过将每个元素追加到一个容器中。然后，您可以对创建的元素使用选择方法来访问按钮，并添加事件侦听器：


var产品列表=[{
id:101，
产品：“罗技鼠标”，
售价:45.0
},
{
id:102，
产品：“罗技键盘”，
售价:50.0
},
{
身份证号码：103，
产品：“HP鼠标”，
售价:35.0
}
];
常量populateProducts=（容器、arrOfObjects）=>{
//启动我们的HTML
var html=“”；
调试器；
//循环对象的成员
arrOfObjects.forEach（函数（项）{
const newDiv=document.createElement（'div'）；
newDiv.className='column'；
newDiv.innerHTML=`\
${item.product}
RM${item.unitprice.toFixed（2）}
添加到购物车
`；
newDiv.querySelector（'button'）。addEventListener（'click'，（）=>{
console.log（item.id）；
});
container.appendChild（newDiv）；
});
};
addEventListener（“加载”，函数（）{
populateProducts（document.getElementById（“productRow”）、productList）；
});
谢谢。我可以知道使用
createElement
的好处吗？是的，我意识到，
createElement
也可以做同样的事情，但还没有想到它的好处。我之所以使用当前方式，是因为我觉得它更具可读性。
createElement
为您提供了一个元素作为回报，您可以使用元素执行许多普通HTML字符串无法执行的操作，例如添加事件侦听器等。