Javascript-函数内函数内函数for循环

我是Javascript新手，我尝试在Javascript中的for循环中调用另一个函数中的函数。我阅读了关于JS循环中闭包和作用域的所有答案，但仍然无法使其工作。基本上，我要做的是将事件侦听器附加到数组的每个元素

这是我的密码：

HTML:

不起作用的部分：

var todoElements = document.getElementsByClassName("btn_task");

for (var i = 0; i < todoElements.length; i++) {

        (function(index) {
                todoElements[index].addEventListener("click", function(){
                var attribute = todoElements[index].getAttribute('data-name');
                showTodo(attribute, "Spanish");
            })
        })(i);

    }

var todoElements=document.getElementsByClassName（“btn_任务”）；
for（var i=0；i

没有理由在此处使用。要绑定到所有按钮，只需为循环创建一个简单的

在事件处理程序中，您可以使用
this
获取单击的元素

var todoElements = document.getElementsByClassName("btn_task");

for (var i = 0; i < todoElements.length; i++) {
    todoElements[i].addEventListener('click', function(){
        showTodo(this.getAttribute('data-name'), "Spanish");
    });
}

var todoElements=document.getElementsByClassName（“btn_任务”）；
for（var i=0；i
试试这个（ES6）：

我们在这里做的是获取所有按钮，为每个按钮分配一个名为getAttr的单击处理程序。getAttr被传递给单击的按钮elment，它查看数据集（元素中具有“data-”的所有属性）并选择data name属性。它将此属性传递给函数。
What“不起作用“？为什么需要循环内部函数？@LeszekRepie:将事件绑定到每个
.btn_task
元素。@RocketHazmat事件侦听器未连接。请参阅以下答案：OP可能不知道ES6是什么。此外，对ES6本机语法的浏览器支持还不够广泛和一致，不足以对其提出一般性建议。我一直在寻找避免使用ES6的方法，因为我的许多用户都使用较旧的浏览器。不过谢谢。@Tomalak当然，除非你是在IE11上，否则它并不普遍。@BenDavison是的，除非你关心不支持它的浏览器，否则它永远不是问题。这是不言而喻的。关键是，开发者虚荣并不是IE11用户打破虚荣的好理由。在这里使用箭头函数没有什么实质性的好处，所以明智的做法是不要使用它们<事实上，code>querySelectorAll

和

Array#forEach

是受支持的，尽管我默认使用jQuery。

var todoElements = document.getElementsByClassName("btn_task");

for (var i = 0; i < todoElements.length; i++) {

        (function(index) {
                todoElements[index].addEventListener("click", function(){
                var attribute = todoElements[index].getAttribute('data-name');
                showTodo(attribute, "Spanish");
            })
        })(i);

    }

var todoElements = document.getElementsByClassName("btn_task");

for (var i = 0; i < todoElements.length; i++) {
    todoElements[i].addEventListener('click', function(){
        showTodo(this.getAttribute('data-name'), "Spanish");
    });
}

function getAttr(e){
    const name = this.dataset.name;
    showTodo(name, "Spanish");
}

const buttons = document.querySelectorAll('.btn_task');

buttons.forEach(button => button.addEventListener('click', getAttr));