getElementsByClassName を使ってエラーが出たときの解決法

getElementsByClassName() を使用して以下のエラー内容が表示された時の原因と解決方法です。

getElementsByClassName(…).addEventListener is not a function 

もし同じような書き方で同様のエラーが出ている方は参考にしてみてください。

エラーが出るコード内容

getElementsByClassName() を使ったエラーコードがこちら。要素を取得し、クリックイベントを発生させようとして実装したコードです。

document.getElementsByClassName('className').addEventListener("click", function(){
  console.log(hoge);
}, false);

document.getElementsByClassName('className').addEventListener("click", function(){
  console.log(hoge);
}, false);

【解決方法】getElementsByClassName に for文をセット

getElementsByClassName の中身は「配列風オブジェクト」になっているためfor文で回して取得する必要がありました。以下のコードに修正したところ、エラーは出ずイベント処理もうまくいきました。

const className = document.getElementsByClassName('className');
for(var i = 0; i < className.length; i++) {
  className[i].addEventListener("click", function () {
    console.log(className);
  }, false);
}

const className = document.getElementsByClassName('className');
for(var i = 0; i < className.length; i++) {
  className[i].addEventListener("click", function () {
    console.log(className);
  }, false);
}

IDを取得する場合は、 getElementById('id_name') だけで問題ないのですが、クラスを取得する getElementsByClassName の場合は、for文が必須になります。