複数要素にaddEventListenerでイベントを設定したい

発端　：　複数要素にaddEventListenerを指定しても動かない!

・getElementsByClassNameで複数個のボタンに同じイベントを指定しようとした

原因：addEventListenerは一つづつのノードにしか指定できなかった

簡単に言うとaddEventListenerは一個の要素に対して仕事をするもの。
配列に対して直接は使えないよと言うことです
なのでgetElementById等で取得して来る際は一つしか取得しないので問題ないです。（HTMLでidは重複ができないので）
ですがgetElementsByClassName等でいくつかの要素をまとめて取得する際は配列で返されます。

（例）getElementById
→first

（例）getElementsByClassName,querySelectorAll等
→[first,second,third]）

1.addEventListenerを正しく理解できていなかった

2.複数の要素を取得してくる際の形式が配列であることを知らなかった

解決策：一つづつ取り出して指定すれば良い

例えば並んでる人全員に同時に整理券を配ることはできないが先頭の人から順番に一つづつ渡していけば解決するよねと言った感じです。

・配列で取得していることがわかれば様々な文法が思い浮かぶことと思います。
（for,foreach,map等）

・下記のコードではfor文を用いていますが、結局どの文法でも良いので、原因であった
　ーaddEventListenerは一つのノードにしかしか設定できない
　ー複数の要素を取得してきたときは配列である
の二点を解決するように動けば、おのずと解決されるように思います。

 // ボタンが五つの場合
let fifthBtn = document.getElementsByClassName("fifth_btn");

for(let i = 0; i < fifthBtn.length; i++) {
    fifthBtn[i].addEventListener("click",()=>{
    alert("clickされました");
  })
}

感想：インプットとアウトプットのバランスの重要性

今回なぜこのような事でつまづいたのかというと、そもそも上記二点の原因に関する知識不足でした。
当然どの分野でも言える事ですが基礎的な部分の最低限のインプットは必要で、
アウトプットの中で問題にぶつかり、その内容をインプットするという学習法を取っていましたが、それだけでは学ぶことができない部分が出てきたり、トレンドへのアンテナが鈍っていくような気がするのでとりあえずインプットの時間を少し増やそうと思いました。

---