Javascript 动态创建按钮时如何移交变量？

我目前正在写一个WhatsApp聊天分析器。因此，我必须遍历聊天的参与者，并创建每个代表一个参与者的按钮。创建这些按钮时，必须将参数或变量移交给函数，该函数随后执行进一步处理参数/变量的代码

但是，无论我在尝试什么，单击按钮时调用的函数都没有使用正确的变量；它总是使用数组中用于在for循环中循环的第一个数组

同时，在创建按钮的同时打印出变量确实可以正常工作-打印出所有唯一的变量，而不仅仅是第一个变量

据我所知，所有这些都表明示波器有问题

来自Java，使用javascript变量非常令人困惑，因为其中一些变量看起来是全局变量，即使它们是在函数或循环中声明的。这就是为什么我试图将传递给动态创建按钮的函数封装起来。遗憾的是，设置一个返回另一个函数的函数并移交第一个函数并不起作用，尽管它实际上应该起作用

此外，我知道在这种情况下应该使用“let”而不是“var”来创建局部变量

下面的代码表示我正在做的事情，以及到目前为止我尝试过的解决方案

let participantsArray=[“Fred”、“Kim”、“Donald”、“Xi”]；
函数显示参与者（）{
让parentElementChatSection=document.getElementById（“participantButtons”）；
让参与者=参与人，让学生参与；
for（让参与者参与）{
参与者选择（参与者、家长元素聊天室）；
}
}
功能参与者选择（参与者、父元素）{
让participantDiv1=createHtmleElement（parentElement，“div”，“participantDiv”）；
let button=createButtonElement（participantDiv1，参与者，“participantButton”，（函数（变量）{
返回函数（）{
handleParticipant（变量）；
};
})（参与者））；
}
函数createButtonElement（父元素、文本、类名、，
功能（执行）{
让元素=document.createElement（“输入”）；
element.type=“按钮”；
element.value=文本；
element.className=className+“隐藏”；
element.id=className+“Hidden”；
element.onclick=函数执行；
parentElement.appendChild（元素）；
让标签=document.createElement（“标签”）；
label.htmlFor=element.id；
label.className=className；
parentElement.appendChild（标签）；
element.style.display=“无”；
让textElement=createTextElement（标签、文本、类名+“文本”）；
返回[element，label，textElement]；
}
功能处理参与者（参与者）{
警惕（参与者）；
}
函数createTextElement（parentElement、text、className）{
让元素=document.createElement（“p”）；
让elementText=document.createTextNode（文本）；
element.className=className；
元素.appendChild（elementText）；
parentElement.appendChild（元素）；
返回元素；
}
函数createHtmleElement（parentElement、类型、类名）{
let element=document.createElement（类型）；
element.className=className；
parentElement.appendChild（元素）；
返回元素；
}
显示参与者（）
.participantbuttonext{
盒影：0px 5px 10px 1px rgba（18、140、126、0.25）；
填充：0.5em；
边缘：0.5em；
背景色：#128C7E；
颜色：白色；
}
.参与者按钮文字：悬停{
背景色：#075E54；
}
.参与部门{
位置：相对位置；
浮动：左；
高度：自动；
弹性收缩：1；
柔性生长：1；
最小宽度：30px；
过渡：0.1s；
过渡属性：背景色、颜色、变换；
文本对齐：居中；
}
#参与者按钮{
宽度：100%；
明确：两者皆有；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：拉伸；
柔性包装：包装；
}
.DisplayedParticipant按钮{
背景色：rgb（1721170）；
}
.DisplayedParticipant按钮：悬停{
背景色：rgb（172,92,0）；
}
问题在于HTML中有重复的ID。下面是一个更简单的示例（单击标签，观察单击哪个按钮）：


document.querySelectorAll（'input'）.forEach（（input）=>{
input.onclick=（）=>console.log（input.value）；
});
标签
标签
参与者
变量->
变量
变量看起来应该采用正确的值。您是否有JSFIDLE或类似的工具，或者可以制作一个堆栈片段来演示这个问题？（使用可运行的东西进行调试会容易得多）使用一些虚拟代码填充上下文（不是问题中的内容），我无法重现问题，感谢您的快速回复。我完全被JavaScript中奇怪的作用域所困扰。因此，我完全没有注意到ID是可能的错误源。除此之外，你有没有发现其他的缺点或一些不好的风格？我对JavaScript非常陌生，并且还在学习，这意味着我感谢任何提示、技巧或建议来改进我的代码。如果没有更多的上下文，很难进入细节，但是：对于当前的代码，输入元素看起来毫无用处，因为它们是隐藏的——我更喜欢使用标签（但将它们更改为
s，因为它们不再连接到输入）。与
createTextNode
相比，只分配给元素的
textContent
更容易，例如：
element.textContent=text
。对于
变量
也不需要立即调用函数