ES6中的for和click事件

Question

如果我使用jQuery，它的工作。

$(document).ready(function() {
   $('btn').click(function() {
       alert('start');
   });
});

但我想使用本機es6

window.onload = function() {
    let btn = document.getElementsByClassName( 'btn' );
    for (let i of btn.length) {
        i.onclick( function () {
            alert( 'start' );
        });
    }
};

錯誤btn.length [Symbol.iterator]不是函數

而且這也不起作用。

window.onload = function() {
    let btn = document.getElementsByClassName( 'btn' );
    for (let i=0; i < btn.length; i++) {

        i.onclick = function () {
            alert( 'start' );
        };
    }
};

Answer 1

for of循環將遍歷具有[Symbol.iterator]屬性的集合的元素。 在您的ES6代碼段中，您嘗試遍歷返回的HTMLCollection長度，例如。 for (let i of btn.length)...

這是您應該做的。

 let btns = document.getElementsByClassName( 'btn' ); for ( let btn of btns ) { btn.onclick = function() { console.clear() console.log(this.textContent) } } 

 <button class="btn">Btn 1</button> <button class="btn">Btn 2</button> <button class="btn">Btn 3</button> <button class="btn">Btn 4</button>