Uncaught TypeErrorが出る

現在ハンバーガーメニューの実装をしています。
三本線の表示はできているのですが、javascriptを書いていくとエラーが起きてしまい、
何も変化が起きない状況です。

ruby:/index.html.haml
1.Main
2  .Main__header
3    .Main__header__nav
4      %h1 エンジニアのための本
5      .hamburger
6        .nav-button
7          = link_to ""
8          %span
9          %span
10          %span
11      %nav
12        %ul.menu
13          %li 
14            フロントエンド
15            %ul.sub
16              %li
17                = link_to "①HTML", card_category_path(:card_id ,1)
18              %li
19                = link_to "②CSS", card_category_path(:card_id, 2)
20              %li
21                = link_to "③Javascript", card_category_path(:card_id, 3)
22          %li
23            バックエンド
24            %ul.sub
25              %li
26                = link_to "④Java", card_category_path(:card_id, 4)
27              %li
28                = link_to "⑤PHP", card_category_path(:card_id, 5)
29              %li
30                = link_to "⑥Python", card_category_path(:card_id, 6)
31              %li
32                = link_to "⑦Ruby", card_category_path(:card_id, 7)
33          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
34            = f.text_field :keyword, placeholder: "検索", class: "search-top"
35            = f.submit "検索", class: "search-top"

hamlはこのようにしていて、
scssは

ruby:/index.scss
1@media screen and (max-width: 1199px) {
2  .hamburger {
3    display: block;
4    position: absolute;
5    right: 10px;
6    top: 10%;
7    width: 50px;
8    height: 80px;
9    cursor: pointer;
10    &.active span:nth-of-type(1) {       //クリックしたら☓ボタンになるように切り替え真ん中の線を消して、上下の線を☓にする。
11      transform: rotate(45deg) translate(-50%,0);
12      transform-origin: 0% 50%;
13    }
14    &.active span:nth-of-type(2) {
15      opacity: 0;
16    }
17    &.active span:nth-of-type(3) {
18      transform: rotate(-45deg) translate(-50%, 0);
19      transform-origin: 0% 50%;
20    }
21  }
22
23  nav {
24    display: none; //ブラウザが縮小した時に消去
25    position: fixed;
26    top: 0px;
27    right: -200px;
28    width: 180px;
29    height: 100%;
30    padding: 40px 30px 0 0;
31    opacity: 0;
32    transition: 0.4s;
33    visibility: hidden;
34    background-color: #ddd;
35    text-align: center; 
36    z-index: -1;
37    &.active {
38      opacity: 1;
39      visibility: visible;
40      right: 0;
41    }
42  }
43  
44  .nav-button {
45    display: inline-block;
46    position: relative;
47    width: 30px;
48    height: 26px;
49
50    span { //三本線の幅など
51      display: inline-block;
52      position: absolute;
53      left: 0;
54      width: 100%;
55      height: 4px;
56      background-color: #fff;
57
58      &:nth-of-type(1) {
59        top: 0;
60      }
61
62      &:nth-of-type(2) {
63        top: 11px;
64      }
65
66      &:nth-of-type(3) {
67        bottom: 0;
68      }
69    }
70  }
71}

このようにして現在三本線が表示できています。

javascriptを用いて、クリックされたら上記のHTMLなどが表示できるようにしたいと思ってこのようにコードお書いています。

ruby:/hamburger.js
1document.getElementsByClassName("hamburger").addEventListener('click', function() {
2  this.classList.toggle("active");
3  document.getElementById("nav").classList.toggle("active");
4});

コンソールをみてみると、このようなエラーが出てしまします。

Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function

どのようにしたらいいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

getElementsByClassName() は複数の要素を返すためにコレクションを返します。hamburger が1つしかないなら、document.getElementsByClassName("hamburger")[0].addEventListener(... ではないでしょうか。

投稿2021/01/18 04:34

int32_t

総合スコア21695

退会済みユーザー

2021/01/18 05:29

回答ありがとうございます。 ``` document.getElementsByClassName("hamburger")[0].addEventListener('click', function() { this.classList.toggle("active"); document.getElementById("nav").classList.toggle("active"); }); ``` このように変更しましたが、変わらずエラーが出てしまいます、、、

行動規範の内容に同意します