当通过javascript创建所有标记时，JS无法将EventListener添加到button元素

我需要通过纯JS创建所有内容（也不直接在html中编写）。 我需要为每张卡的OK按钮添加一个事件。单击按钮时，只需显示单击元素的名称和年龄值

我做错了什么

var组={
“成员”：[
{
“姓名”：“罗杰”，
“年龄”：38
}, {
“姓名”：“安娜”，
“年龄”：29
}, {
“名称”：“Elisa”，
“年龄”：51
}, {
“姓名”：“拉蒙”，
“年龄”：71
}, {
“姓名”：“Eva”，
“年龄”：18岁
}, {
“姓名”：“马汀”，
“年龄”：33
},
]
};
var container=document.createElement（“DIV”）；
container.classList.add（“container”）；
var button=document.createElement（“按钮”）；
按钮。类列表。添加（“按钮”）；
button.innerHTML=“Aceptar”；
button.onclick=函数（）{
showGroup（）；
};
document.body.appendChild（容器）、appendChild（按钮）；
window.addEventListener（“resize”，keepSquare）；
函数showGroup（）{
group.members.forEach（值=>{
var成员=document.createElement（“DIV”）；
member.classList.add（“成员”）；
var button2=document.createElement（“SPAN”）；
按钮2.classList.add（“ok_按钮”）；
button2.innerHTML=“确定”；
按钮2.onclick=功能（e）{
如果（！按钮2）{
返回；
}
createAlert（值）；
}
成员。附件（按钮2）；
member.innerHTML+=“
”+value.name+”
”；
member.innerHTML+=“”+value.age+“”；
容器。子（成员）；
});
keepSquare（）；
}
document.addEventListener（“加载”，函数（）{
var butt=document.getElementsByClassName（“确定按钮”）；
控制台。日志（对接）；
对于（变量i=0；i>butt.length；i++）{
butt[i].onlick=createAlert（group.members）；
}
});
函数keepSquare（）{
变量框=document.queryselectoral（“.member”）；
如果（长方体长度>0）{
对于（i=0；i

正文{
字体大小：16px；
}
.按钮{
字号：2em；
宽度：95%；
保证金：0.5em 0.825em；
填充：0.325em；
边框：1件深红色点缀；
边界半径：10px；
盒影：0 0 11px深红色插图；
大纲：无；
光标：指针；
}
.集装箱{
显示器：flex；
柔性包装：包装；
对正内容：空间均匀；
}
.成员{
位置：相对位置；
框大小：边框框；
宽度：93%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
用户选择：无；
边框：1件深红色点缀；
边界半径：10px；
盒影：0 0 29px深红色插图；
边缘底部：1米；
}
.成员姓名{
保证金：0；
}
.确定按钮{
宽度：20px；
高度：20px；
背景色：黑色；
文本对齐：居中；
线高：20px；
颜色：白色；
位置：绝对位置；
底部：5px；
顶部：自动；
左：5px；
光标：指针；
用户选择：无；
边界半径：50%；
字号：1rem；
填充：3倍；
}
.警惕{
显示：无；
位置：固定；
z指数：1；
左：0；
排名：0；
宽度：100%；
身高：100%；
背景色：rgb（0,0,0）；
背景色：rgba（0,0,0,0.4）；
}
.警报，可见{
显示：块；
}
@介质（最小宽度：600px）{
.成员{
宽度：30%；
}
.确定按钮{
顶部：5px；
左：自动；
右：5px；
}
}
@介质（最小宽度：600px）和（最大宽度：799px）{
.成员{
宽度：46%；
}
}

您可能需要使用

this

将特定按钮元素作为目标，同时您的member.inner也将直接显示，而不是在单击按钮时显示。仅供参考：

是无效的HTML。您可能需要使用

this

将特定按钮元素作为目标，此外，您的member.inner将直接显示，而不是单击按钮时显示。仅供参考：

是无效的HTML。