addEventListener的javascript分配不正确

Question

当我点击页面上的任何一个Selects时，函数告诉我的唯一一件事是它正在使用最后一个Select。

假设我的页面上有6个Selects，我首先为它们分配一个addEventListener，所有这些都将id作为参数传递，然后当更改其中任何一个时，我希望警报说"OK+我选择的选项"，但我得到的总是"OK gubeSelect6"。

为什么当我选择1-5时，它没有显示正确的东西？我的addEventListener错了吗？

非常感谢，

function resetValues(ddl) {
    alert("OK " + ddl);
}
var selects = document.getElementsByName('gubeSelect');
var sel;
console.log(selects);
for(var z = 0; z < selects.length; z++){
    console.log(z + " " + selects[z].id + " " + selects[z].name);
    sel = selects[z];
    document.getElementById(sel.id).addEventListener("change", function () {
        resetValues(sel.id);
    });
}

Answer 1

试试这个：

document.getElementById(sel.id).addEventListener("change", function () {
        resetValues(this.id);
    });

到事件发生时，sel.id将始终为6。您需要对添加侦听器的元素进行寻址。

Answer 2

尝试使用resetValues(this.id);而不是resetValues(sel.id);

我认为当您在这里调用resetValues(sel.id);时，sel变量正在发送对函数的引用。当您更改sel的值时，它将更改以前sel的的所有值