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

脱jQueryと言われてもう何年も経ちますが、私は一向に脱しておりませんw。

そんな私でもたまには Vanilla JS なるものを使いたくなる時があります。そしてたまにしか使わないので、けっこう同じエラーを出しますw。

なので、また同じエラーが出たときにすぐ解決できる用のメモです。（新たなエラーに出会うごとに更新します）

getElementsByClassName(…).addEventListener is not a function

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

document.getElementsByClassName(‘className’).addEventListener(“click”, function(){console.log(hoge);}, false);

これは getElementsByClassName() で要素を取得して、クリックイベントを発生させたかったコード。

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);
}