JavaScript在循环中添加带参数的addEventListener调用函数，结果只传递最后一个元素值
JavaScript在循环中添加带参数的addEventListener调用函数，结果只传递最后一个元素值
提问于 2021-07-13 17:54:27
我有数据，我循环并动态构建HTML label元素到每个元素，我附加addEventListener与点击事件和函数，接受当前值。
但是，当我单击创建的元素时，只有初始数组中的最后一个元素作为参数传递给addEventListener函数。
在下面的示例中，当单击foo1或foo2时，值始终为foo3
我希望每个onclick都拥有自己的关键数据。
因此，当我单击foo1时，它将显示foo1
当我单击foo2时，它会显示foo2
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script>
var data = {
"foo1" : "aaa",
"foo2" : "bbb",
"foo3" : "ccc"
}
var popolateDS = function() {
self = this;
for(var key in data) {
if (data.hasOwnProperty(key)) {
var label = document.createElement('label');
label.innerHTML = key;
label.id = "lbl_"+key;
label.addEventListener("click", () =>{
self.dsOnClick(key);
}, false);
document.getElementById("container2").appendChild(label);
var br = document.createElement('br');
document.getElementById("container2").appendChild(br);
}
}
}
var dsOnClick = function(key) {
alert(key);
}
</script>
</head>
<body>
<div id="container2">
</div>
<button onclick="popolateDS()">click</button>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2021-07-13 18:00:01
这是一个作用域问题。您可以将var替换为let
当您使用var时，最后不同label元素上的所有事件侦听器都指向完全相同的值。let是块作用域，每个迭代值都是不同的。因此，当您单击foo1时，您引用的是正确的值。
如果你仍然想使用var，你必须在你的函数中传入参数。这样，它们就是一个不同的值，并且不会被限定为外部的key变量的作用域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
<script>
var data = {
"foo1" : "aaa",
"foo2" : "bbb",
"foo3" : "ccc"
}
var popolateDS = function() {
self = this;
for(var key in data) {
var label = document.createElement('label');
label.innerHTML = key;
label.id = "lbl_"+key;
label.addEventListener("click", (a) => {
self.dsOnClick(a);
}, false);
document.getElementById("container2").appendChild(label);
var br = document.createElement('br');
document.getElementById("container2").appendChild(br);
}
}
var dsOnClick = function(key) {
alert(key);
}
</script>
</head>
<body>
<div id="container2">
</div>
<button onclick="popolateDS()">click</button>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68360212
复制相关文章
相似问题
腾讯云开发者
