ハンバーガーメニュー実装中　JavaScriptエラー

前提・実現したいこと

【JS】addEventListenerが機能しない理由について。
モバイルメニューをクリックすることで、javascriptのclickイベントを発火させたいが、(Uncaught TypeError：nullのプロパティ 'addEventListener'を読み取れません）とエラーがでます！
初歩的なミスかと思いますが原因が分からず
どこにミスがあるのかご教示いただけないでしょうか。
よろしくお願いします。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'addEventListener' of null

該当のソースコード

app > javascript > packs > application.js


require("@rails/ujs").start()
// require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../main.js")

app > javascript > main.js


class MobileMenu {
    constructor() {
        this.DOM = {};
        this.DOM.btn = document.querySelector('.mobile-menu__btn');
        this.DOM.cover = document.querySelector('.mobile-menu__cover');
        this.DOM.container = document.querySelector('#global-container');
        this.eventType = this._getEventType();
        this._addEvent();
    }

    _getEventType() {
        return window.ontouchstart ? 'touchstart' : 'click';
    }

    _toggle() {
        this.DOM.container.classList.toggle('menu-open');
    }

    _addEvent() {
        this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this));
　　　　　　↑ここでエラーが起こっています！
        this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this));
    }
}

new MobileMenu();

app > views > tweets > index.html.erb


<div id="global-container">
    <div id="container">
        <header class="header">
            <button class="mobile-menu__btn">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </header>
    </div>
    <nav class="mobile-menu">
        <ul class="mobile-menu__main">
            <li class="mobile-menu__item">
                <a href="#">
                    <span class="main-title">Login</span>
                    <span class="sub-title">ログイン</span>
                </a>
            </li>
            <li class="mobile-menu__item">
                <a href="#">
                    <span class="main-title">Sign Up</span>
                    <span class="sub-title">新規登録</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

app > views > layouts > application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>FruitStore</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%= javascript_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

app > assets > stylesheets > tweets.scss


$cBlack: black;
$cWhite: white;

.mobile-menu__btn {
    background-color: unset;
    border: none;
    outline: none !important;
    cursor: pointer;

    & > span {
        background-color: $cBlack;
        width: 35px;
        height: 2px;
        display: block;
        margin-bottom: 9px;
        transition: transform 0.7s;

        &:last-child {
            margin-bottom: 0;
        }
    }
}

.menu-open {
    background-color: $cBlack;

    & .mobile-menu__btn {
        & > span {
            background-color: $cWhite;

            &:nth-child(1) {
                transition-delay: 70ms;
                transform: translateY(11px) rotate(135deg);
            }
            &:nth-child(2) {
                transition-delay: 0s;
                transform:  translateX(-18px) scaleX(0);
            }
            &:nth-child(3) {
                transition-delay: 140ms;
                transform: translateY(-11px) rotate(-135deg);
            }
        }
    }
}

### 試したこと

Uncaught TypeError：nullのプロパティ 'addEventListener'を読み取れません
と記述が正しくないか、<script src="main.js"></script>をindex.html.erbに下記に記述したりしましたがエラーは変わりませんでした。
すみませんが、よろしくお願いします！

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答2件

自己解決

document.addEventListener("DOMContentLoaded", function() {

class MobileMenu {
    constructor() {
        this.DOM = {};
        this.DOM.btn = document.querySelector('.mobile-menu__btn');
        this.DOM.cover = document.querySelector('.mobile-menu__cover');
        this.DOM.container = document.querySelector('#global-container');
        this.eventType = this._getEventType();
        this._addEvent();
    }

    _getEventType() {
        return window.ontouchstart ? 'touchstart' : 'click';
    }

    _toggle() {
        this.DOM.container.classList.toggle('menu-open');
    }

    _addEvent() {
        this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this));
        this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this));
    }
}
new MobileMenu();

});

投稿2021/01/02 12:06

sakaiyuji

総合スコア0

sakaiyuji

2021/01/02 12:10

DOMの要素の検索はDOMの生成が終わったあとにしないといけかったです。 DOMの生成が終わってないのにquerySelectorでDOMの検索を行っているため、nullが帰ってきてることがエラーになっていました。つまりdocument.querySelectorはdocument.addEventListener 'DOMContentLoaded' 内に記述したら動作しました！

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

this.DOM.btn = document.querySelector('.mobile-menu__btn')

ここが怪しそうですね。
このクラスとか間違ってたりしないですか？

投稿2021/01/01 05:38

educ_gt

総合スコア282

sakaiyuji

2021/01/01 06:31

クラス名は確認したのですが、間違ってはなさそうです。コメントありがとうございます！

educ_gt

2021/01/01 07:18

this.DOM.btn = document.querySelector('.mobile-menu__btn'); では、これが取得できてるかどうかは試されましたか？

sakaiyuji

2021/01/01 10:03

this.DOM.btn = document.querySelector('.mobile-menu__btn');を console.log(this.DOM.btn);で試したらnullと返ってきました！ this.DOM.btn = document.getElementsByClassName('mobile-menu__btn');をconsole.logで試してみたところ、 HTMLCollection []0: button.mobile-menu__btnlength: 1__proto__: HTMLCollectionと返ってきました！それでも結果は変わらなかったのですが、一つ一つ調べて解明していきたいと思います。

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

あなたの回答