forEachでaddEventListenerを使うには

Question

btnと言うクラス名を持つ要素に対してaddEventListenerでクリックイベントを設定しているのですが、for文を使ったものからforEach文を使うようにしたいのですが何か方法はありますでしょうか？

for(let i = 0; i < btn.length; i ++){
         btn[i].addEventListener('click',function(){
           if(this.value === data.results[count].correct_answer){
             score ++;
             count ++;
           }else{
             count ++;
           }
           // クイズが終了した時の表示
           if(count === 10){
             qsNum.innerHTML = "あなたの正解数は" + score + "です！";
             qs.innerHTML = "再度チャレンジする場合は以下をクリック";
             genre.style.display = "none";
             diff.style.display = "none";
           }
           answsArr = [];
           answs.textContent = [];
           setQuiz(data);
         });
       }

Array.from(btn);でbtnと言うクラス名を持つ要素を配列にしてforEachをかけて見るところまでやったのですが、そこからaddEventListenerを使う方法がわかりませんでした。

Comments

[yasutomi]

肝心のforEachを使用したコードが記載されていないため
追記をお願いします。

[Singo109]

質問文に脱字があり誤解させてしまいました。申し訳ありません。上記のfor文を使った処理をforEach文に書き換えたいと言う質問の内容になります。

[Singo109]

試した事は、
const btns = Array.from(btn);
btns.forEach(
);
でbtnと言うクラス名を持つ要素に対してforEach文を適用する事はできるのかなと思ったのですが、その場合、addEventListenerがどうやったら使えるのかがわかりませんでした。

Answer 1

このようにします。

<button class="btn">btn</button>
<button class="btn">btn</button>
<button class="btn">btn</button>
<script>
var btn = document.querySelectorAll('.btn')
btn.forEach(function(el, i) {
  el.addEventListener('click', function() {
    alert(i)
  })
})
</script>

Comments

[Singo109]

ありがとうございます。なるほどです！

Answer 2

Array.Fromが今風ですがこう書くと適用範囲が広がります

[].forEach.call(btn,function(x){
  x.addEventListener('click',function(e){
    ・・・
  });
});

Comments

[Singo109]

ありがとうございます。こういうやり方があるのですね！