为什么这段代码不起作用？(我是一个完全的js菜鸟，可能犯了一些明显的错误)

Question

我在这里要做的是将eventListener应用于一个类的每个元素，然后，在用户单击其中一个元素后，将根据类数组中该元素的索引向他发出提示。

此外，是的，我知道它可以用很多不同的方式来完成，但我希望它能在这个特定的方式中发挥作用(如果可能的话(。

var buttons = document.getElementsByClassName("openbtn");
var i;
for (i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener("click", function () {
switchBtn(i);
});
}

function switchBtn(index) {
switch (index) {
case 0:
prompt("case0");
break;

case 1:
prompt("case1");
break;

default:
alert(index);
break;
}
}

Answer 1

所有事件处理程序函数共享相同的i变量，该变量等于循环结束时的buttons.length，因此每次都将使用默认情况。相反，使用let进行词汇范围界定。

var buttons = document.getElementsByClassName("openbtn");
for (let i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener("click", function () {
switchBtn(i);
});
}

function switchBtn(index) {
switch (index) {
case 0:
prompt("case0");
break;
case 1:
prompt("case1");
break;
default:
alert(index);
break;
}
}

<button class="openbtn">case 0</button>
<button class="openbtn">case 1</button>
<button class="openbtn">default</button>