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

问题描述

我在这里尝试做的是将 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;
    }
}

解决方法

所有事件处理函数共享同一个 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>