特定のクラス名をもつ要素がクリックされたら、任意のクラスを与える

Question

以下は、id＝"menu"をクリックしたときに、クラス'Open'を切り替えるコードですが、
class="menu"の場合は、どのように書き換えができるのでしょうか？

クラスの場合は、getElementsByClassNameを使用するのは、
なとなくわかったのですが、調べても見つけられず、
あまり推奨ではないのでしょうか？

const Menu = document.getElementById('menu');
Menu.addEventListener('click', () =>{
Menu.classList.toggle('Open');
});

Answer 1

getElementsByClassName は複数の要素（HTMLCollection）を返しますので、for文でループ処理する必要があります。

const menus = document.getElementsByClassName('menu');
for (let i = 0; i < menus.length; i++) {
  menus[i].addEventListener('click', () => {
    menus[i].classList.toggle('Open');
  }, false);
}

Comments

[退会済みユーザー]

hatena19さん、大変、分かりやすく教えていただきありがとうございました。
返すカタチが違うのですね。1ページに何個でも構わないクラスだから、なのですね。
ありがとうございました！