addEventListenerが動作しません。

Question

閲覧いただき、ありがとうございます！
JS初心者のウェブデザイナーです。

表題の件につきまして、アコーディオンを素のJSで描こうとしているのですが、
コードにてaddEventListenerが動作せず原因がわからないためお聞きしました。

エラーとしては、下記のエラーが出ます。
index.html:60 Uncaught TypeError: btn.addEventListener is not a function　at index.html:60

実際のコードがこちらになります。

 <div class="contentsWrap">
       <p class="btn">OPEN</p>
       <ul class="menu">
           <li>menu</li>
           <li>menu02</li>
           <li>menu03</li>
           <li>menu04</li>
           <li>menu05</li>
           <li>menu06</li>
       </ul>
    </div>
    
    <script>
        const btn = document.getElementsByClassName('btn');
        const menu = document.querySelector('.menu');
        const menuHeight = menu.clientHeight;

        menu.style.height = '0px';

        btn.addEventListener('click', () =>{
            console.log("aaa");
                if(menu.style.height === '0px'){
                    menu.style.height = menuHeight + 'px';
                }else{
                    menu.style.height = '0px';
                }
        });

    </script>
</body>

試したこととしましては、関係ないかとは思っていたのですが、
定数を変数にしてみたりしました。

お手すきの際にご教授いただけますと幸いです。

Comments

[退会済みユーザー]

jquery の要素がどこに？

Answer 1

getElement"s"ByClassNameの返り値は、HTMLElementではなく、HTMLCollectionなので
そのままでは addEventListenerできません。
中身を一個ずつ取り出してaddEventListenerする必要があります。

 <script>
     const btn = document.getElementsByClassName('btn');
     const menu = document.querySelector('.menu');
     const menuHeight = menu.clientHeight;

     menu.style.height = '0px';

     console.log(btn); // HTMLCollection
     Array.prototype.forEach.call(btn, function(element) {
        console.log(element);
        element.addEventListener('click', () =>{
            console.log("aaa");
            if(menu.style.height === '0px'){
                    menu.style.height = menuHeight + 'px';
            }else{
                    menu.style.height = '0px';
            }
        });         
     });
 </script>

Comments

[kahosayshello]

ご丁寧にありがとうございます！！！
なるほど…！では高確率でgetElementByIdを使用しておけば大丈夫というイメージでしょうか？
HTMLcollectionとHTMLelementの要素について理解していなかったので勉強してgetElementsByClassNameでの取得もできるようにします！

本当にありがとうございます！！

Answer 2

const btn = document.querySelector('.btn');

追記

複数のmenuを想定しているならこんな感じ
OPEN/CLOSEを意識すること。
非表示は高さの設定よりdisplayでやるほうが一般的です。

<script>
window.addEventListener('DOMContentLoaded',()=>{
  document.querySelectorAll('.menu').forEach(x=>{
    x.style.display="none";
  });
  document.querySelectorAll('.btn').forEach(x=>{
    x.addEventListener('click',e=>{
      var flg=x.textContent=="OPEN";
      x.nextElementSibling.style.display=flg?"initial":"none";
      x.textContent=flg?"CLOSE":"OPEN";
    });
  });
});
</script>
<div class="contentsWrap">
<p class="btn">OPEN</p>
<ul class="menu">
<li>menu</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
<li>menu06</li>
</ul>
</div>
<div class="contentsWrap">
<p class="btn">OPEN</p>
<ul class="menu">
<li>menu</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
<li>menu06</li>
</ul>
</div>

</script>
<div class="contentsWrap">
<p class="btn">OPEN</p>
<ul class="menu">
<li>menu</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
<li>menu06</li>
</ul>
</div>
<div class="contentsWrap">
<p class="btn">OPEN</p>
<ul class="menu">
<li>menu</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
<li>menu05</li>
<li>menu06</li>
</ul>
</div>

Comments

[kahosayshello]

ありがとうございます！！動作しました！！
なぜ、.btnもquerySelectorにしないといけないのでしょうか…？
お手数ですが、ご教授いただけますと幸いです；；

[yambejp]

getElementsByClassNameで戻ってくるのはHTMLCollectionといって
配列ライクな複数のHTML要素を集合的に収集します
HTMLCollectionはaddEventListenerメソッドを持っていません
一方querySelectorは対象が複数あってもその最初のHTMLElementしか
掴みません。HTMLElementはaddEventListenerが利用できます。

[kahosayshello]

お返事ありがとうございます！！！
そうなのですね。querySelectorを使ったjsもあまり拝見したことがなかったのはその理由だったからなんですね。先ほど、アコーディオンのDOM要素を下にもう一つ増やして確認してみたのですが、下の方は動作しませんでした。
HTMLCollection等について勉強しっかりします！

ありがとうございました！！

[kahosayshello]

追記までいただき、ありがとうございます！！＞＜
なるほど。displayで行うのが一般的なのですね！
まだまだわからない構文がたくさんありますので、今日勉強します！

本当にありがとうございます！！