console.log在for循环中返回未定义

Question

我正在遍历3个按钮的数组 在for循环中，我已将事件侦听器附加到每个按钮 我正在尝试console.log我当前正在循环通过的按钮，但它返回的是未定义的。

let buttons = document.getElementsByClassName('btn');

for (i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() {
    console.log(buttons[i]);
    // returns undefined
  })
}

<button class='btn'>a</button>
<button class='btn'>b</button>
<button class='btn'>c</button>

Answer 1

您可以使用闭包来实现它。

let buttons = document.getElementsByClassName('btn');

for (let i = 0, ln = buttons.length; i < ln; i++) {
  (function(index) {
    buttons[index].addEventListener('click' , function() {
            console.log(buttons[index]);
            // returns undefined
    })
  })(i)
}

<button class='btn'>a</button>
<button class='btn'>b</button>
<button class='btn'>c</button>