forおよびclickイベントfor es6

Question

jqueryを使用している場合は動作しています。

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

が、私は[Symbol.iterator] btn.lengthネイティブES6

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

エラーを使いたい機能

そして、これはあまりにも動作しませんではありません。

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>