ハンバーガーメニュー ページ内リンクを押したらメニューが閉じる実装

Question

ハンバーガーメニュー ページ内リンクを押したらメニューが閉じる実装をしたいです

現在、ハンバーガーメニューを押すとメニューが出がでてページ内リンクに飛びます。
ページ内リンクを押したあとメニューを消すにはどうしたらよろしいでしょうか？

下記エラーです。

sample.js:6 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at toggleNav (sample.js:6)
    at sample.js:13

 <header class="header">
        <hgroup>
            <h1>LOGO</h1>
        </hgroup>
        <nav class="g_nav">
            <ul class="g_nav_list">
                <li class="g_nav_item"><a href="#">ホーム<span>HOME</span></a></li>
                <li class="g_nav_item"><a href="#">事業内容<span>SERVICE</span></a></li>
                <li class="g_nav_item"><a href="#">会社概要<span>COMPANY</span></a></li>
                <li class="g_nav_item"><a href="#">お問い合わせ<span>CONTACT</span></a></li>
            </ul>
        </nav>
        <div class="h_menu" id="h_menu_js">
            <span class="h_menu_line h_menu_line_1"></span>
            <span class="h_menu_line h_menu_line_2"></span>
            <span class="h_menu_line h_menu_line_3"></span>
            <p>MENU</p>
        </div>
        <div class="bg_open" id="bg_open_js"></div>
    </header>

function toggleNav() {
    var body = document.body;
    var hamburger = document.getElementById('h_menu_js');
    var blackBg = document.getElementById('bg_open_js');
    var href = document.getElementById('a[href^="#"]');//ここは試しに実装した部分です

    hamburger.addEventListener('click', function () {
        body.classList.toggle('menu_open');
    });
    blackBg.addEventListener('click', function () {
        body.classList.remove('menu_open');
    });
    href.addEventlistener.on('click',function () { 
       body.classList.remove('menu_open');{ 
    }); //ここは試しに実装した部分です
}
toggleNav();

初心者で大変申し訳ないのですが、
ご教授いただけると幸いです。

よろしくお願い致します。

Answer 1

セレクタを使いたいならgetElementByIdではなくてこっちです。

与えられた CSS セレクターに一致する文書中の要素のリストを示す静的な (生きていない) NodeList を返します

Document.querySelectorAll() - Web API | MDN

---

対象の要素がたくさんある場合は、forEach を使うといいでしょう。

NodeList.prototype.forEach() - Web API | MDN

こんな感じで。

    href.forEach(
      e => e.addEventListener( 'click', function() { 
        body.classList.remove('menu_open');
      })
    );

Comments

[chiiiiii]

ご返答ありがとうございます。

var href = document.getElementById('a[href^="#"]');は削除するという認識であってますか？？

[Lhankor_Mhy]

そうですね。
削除して、querySelectorAllで書きなおす、ということです。

[chiiiiii]

現在、下記へ変更したのですが
function toggleNav() {
var body = document.body;
var hamburger = document.getElementById('h_menu_js');
var blackBg = document.getElementById('bg_open_js');
var href = document.querySelectorAll();

hamburger.addEventListener('click', function () {
body.classList.toggle('menu_open');
});
blackBg.addEventListener('click', function () {
body.classList.remove('menu_open');
});
href.forEach(
e => e.addEventListener( 'click', function() {
body.classList.remove('menu_open');
})
);
href.forEach(
e => e.addEventListener( 'click', function() {
body.classList.remove('menu_open');
})
);

}
toggleNav();

ハンバーガーメニュー自体反応なくなってしまいました。。。

[Lhankor_Mhy]

セレクタを忘れてますよ。
chiiiiii さんが書いた通りで大丈夫かと思います。

[chiiiiii]

解決に至りました！！！！
ありがとうございますm(__)m大変たすかりました！