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

脱jQueryと言われてもう何年も経ちますが、私は一向に脱しておりません。
そんな私でもたまには Vanilla JS なるものを使いたくなる時があります。そしてたまにしか使わないので、けっこう同じエラーを出します…。そこでまた同じエラーが出たときにすぐ解決できる用のメモです。

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

エラーが出るコード内容

getElementsByClassName() を使っていつもエラーを出てしまうコードがこちら。

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

これは getElementsByClassName を使って要素を取得し、クリックイベントを発生させようとして実装したコードです。

ところが設定したコードがうまく動きません。デベロッパーツールを確認したところ以下のエラー内容が表示されていました。

getElementsByClassName(…).addEventListener is not a function 

【解決方法】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);
}

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

HTML要素のクラスを取得するか、IDを取得するかによって書き方が変わるので注意が必要だということですね。