複数のボタンのループでonclickを使用するにはどうすればよいですか？

Question

私は6つのボタンを持っています。これらはすべて "テスト"クラスです。

for (n=0 ; n < document.getElementsByClassName("test").length ; n++) { 
    document.getElementsByClassName("test")[n].onclick = function() { console.log(n); }; 
} 

しかし、私にconsole.logは唯一の「6」を表示：私はそれらのすべてが1と6

私のコードの間で、その数を表示したい です。 できるだけ早く（できるだけ短いコードで）行うことができますか？

Answer 1

あなたは、あなたが代わりに、Array.prototype.forEach()

Array.from(document.getElementsByClassName("test")) 
 
.forEach(function(el, i) { 
 
    el.onclick = function() { 
 
    console.log(i) 
 
    } 
 
})

<div class="test">click</div> 
 
<div class="test">click</div>

を Array.from()を使用することができ forループ

for (n = 0; n < document.getElementsByClassName("test").length; n++) { 
 
    (function(i) { 
 
    document.getElementsByClassName("test")[i].onclick = function() { 
 
     console.log(i); 
 
    }; 
 
    }(n)) 
 
}

<div class="test">click</div> 
 
<div class="test">click</div>

の内部でクロージャを使用することができます