クリックでヘッダーを閉じるようにしたい

前提・実現したいこと

スマホサイズでヘッダーナビゲーションがwindowいっぱいに表示されるようになっています。
ナビゲーション内容を押せば、そこにスクロールされるようになっています。
スクロールすると同時に表示されたナビゲーションが消えるようにしたいです。

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

javaScript で実装しようとしているのですが、スクロールするだけでナビゲーションが消えません。

該当のソースコード

js
1{
2    const toggle = document.getElementById('navbar__toggle');
3    const icon = document.getElementsByClassName('navbar__toggle__icon');
4    const nav = document.getElementById('header__nav');
5    let navItem = document.querySelectorAll('.header__nav__item');
6    console.log(navItem);
7
8
9    toggle.addEventListener('click', () => {
10        toggle.classList.toggle('open');
11        nav.classList.toggle('show');
12        if(nav.classList.contains('show')){
13            nav.style.display='block';
14            icon[0].style.background = '#fff';
15            icon[1].style.background = '#fff';
16            icon[2].style.background = '#fff';
17            window.addEventListener('DOMContentLoaded',() =>{
18                navItem.addEventListener('click', () => {
19                    nav.classList.remove('show');
20                    nav.style.display='none';
21                });    
22            });
23        }else {
24            nav.style.display='none';
25            icon[0].style.background = '#555555';
26            icon[1].style.background = '#555555';
27            icon[2].style.background = '#555555';
28        }
29    });
30
31
32}

html
1 <div id="header__nav" class = "nav">
2        <div class="nav__logo logo">
3            <div class="logo__title nav__logo__title">○○<br><span>○○</span></div>
4            <div class="nav__circle logo__circle nav__logo__circle--pink logo__circle--pink"></div>
5            <div class="nav__circle logo__circle nav__logo__circle--pink-s logo__circle--pink-s"></div>
6        </div>
7        <ul class="nav__list header__nav__list"> 
8            <div class="drawer"></div>
9            <li class="nav__item header__nav__item"><a href="#introduction">Who is Karin!?</a></li>
10            <li class="nav__item header__nav__item"><a href="@@@">Skils</a></li>
11            <li class="nav__item header__nav__item"><a href="#@@@">The Work</a></li>
12            <li class="nav__item header__nav__item"><a href="#@@@@">Autoput</a></li>
13        </ul>
14    </div>

sass
1$layout-width-inner: 1226px;//インナーの幅
2
3// ブレークポイント
4$breakpoints: (
5"sp": "screen and (max-width: 767px)",
6"tab": "screen and (max-width: #{$layout-width-inner - 1px})",
7"pc": "screen and (min-width: #{$layout-width-inner})",
8);
9
10// メディアクエリー
11@mixin mq($breakpoint: sp) {
12
13@media #{map-get($breakpoints, $breakpoint)} {
14
15    @content;
16}
17 .nav {
18        right: 0px;
19        width: 100%;
20        margin: 10px auto 30px;
21
22        
23        .nav__logo {
24            display: none;
25            @include mq('sp'){  
26            display: block;
27            top: 50px;
28            color: #fff;
29            width: 60%;
30            text-align: center;
31            margin: 150px auto 0;
32            position: relative;
33        .nav__logo--title {
34            z-index: 1000;
35        }
36            
37            .nav__circle {
38                @include mq('sp') {
39                    z-index: 1000;
40                }
41            }
42        }
43    }
44
45
46        
47        .nav__list {
48            display: flex;
49            list-style: none;
50            justify-content: center;
51            line-height: 1.0;
52           
53            .nav__item {
54                margin-right: 40px;
55                font-size: 1rem;
56                @include mq('sp') {
57                    margin: 20px auto;
58                    font-size: 18px;
59            }
60            &:last-child {
61                margin-right: 0;
62            }
63        }
64        a {
65            text-decoration: none;
66            color: #3E3E3E;
67            &:hover{
68                border-bottom: 1px solid #3E3E3E;
69                transition: all 1s ease 0s;
70                width: 110%;   
71                top: 50px;
72                left: 20px;
73            }
74        }
75    }
76    }
77
78    
79}
80
81    
82    #header {
83        text-align: center;
84        position: absolute;
85        z-index: 1000;
86        top: 0;
87        right: 3.6rem;
88        margin-top: 30px;
89        border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
90        padding: 20px 40px;
91        background-color:rgba(245,245,245,0.5);
92        box-shadow: 2px 2px 2px;
93        @include mq('sp') {
94            position: static;
95            background-color: transparent;
96            box-shadow: 0 0 0;
97            padding: 0;
98            margin: 0 30px;
99            height: 100px;
100            text-align-last: left;
101
102        }
103        .header__logo{
104            text-align: center;
105            margin: 30px 100px 20px;
106            display: inline-block;
107    
108            @include mq('sp') {
109                margin: 30px auto 20px;
110            }
111        
112            
113   
114}
115
116
117    #navbar__toggle{
118        z-index:9999;
119        position: absolute;
120        right: 20px;
121        top: 45px;
122        cursor: pointer;
123        display: none;
124        @include mq('sp') {
125            display: block;
126            z-index:9999;
127
128        }
129
130    .navbar__toggle__icon {
131        position: relative;
132        display: block;
133        height: 2px;
134        width: 30px;
135        background: $black;
136        -webkit-transition: ease .5s;
137        transition: ease .5s;
138        z-index: 1000;
139        
140    }
141    .navbar__toggle__icon:nth-child(1) {
142        top: 0;
143    }
144
145    .navbar__toggle__icon:nth-child(2) {
146        margin: 8px 0;
147    }
148    .navbar__toggle__icon:nth-child(3) {
149        top: 0;
150    }
151}
152    /*OPEN時の動き*/
153    #navbar__toggle.open .navbar__toggle__icon:nth-child(1) {
154        top: 10px;
155        -webkit-transform: translateY(8px) rotate(45deg);
156        transform: translateY(8px) rotate(45deg);
157    }
158    #navbar__toggle.open .navbar__toggle__icon:nth-child(2) {
159        opacity: 0;
160    }
161    #navbar__toggle.open .navbar__toggle__icon:nth-child(3) {
162        top: -10px;
163        -webkit-transform: translateY(8px) rotate(-45deg);
164        transform: translateY(8px) rotate(-45deg);
165    }
166    #header__nav {
167    @include mq('sp') {
168        display: none;
169        width: 100%;
170        z-index: 99;
171        height: 100%;
172        bottom: 0;
173        margin: 0 auto;
174        background-color:rgba(71,71,71,0.9);
175        height: 100%;
176        z-index: 99;
177        position: fixed;
178    }
179    
180    .nav__logo__circle--pink {
181        @include mq('sp') {
182            top: -30px;
183            right: 20px;
184            // right: 10px;
185            // top: -20px;
186        }
187}
188    .nav__logo__circle--pink-s {
189        @include mq('sp') {
190            right: 10px;
191            top: 20px;
192        }
193}
194
195    .header__nav__list {
196    @include mq('sp') {
197        width: 200px;
198        display: block;
199        padding-right: 0;
200        padding-left: 0;
201        height: 100%;
202        margin: 100px;
203    }
204    .header__nav__item {
205        a {
206            @include mq('sp') {
207                color: #fff;
208            }
209        }
210    }
211}
212    }
213    #header__nav .show {
214        @include mq('sp') {
215        display: block;
216        }
217    }

試したこと

toggleのクリックイベント内の、
window.addEventListener('DOMContentLoaded',() =>{});
が抜けると
main.js:37 Uncaught TypeError: navItem.addEventListener is not a function
at HTMLDivElement.<anonymous> (main.js:37)
といったエラーが出るので、付けているのですが、付けた際に、navItem.addEventListener('click', () =>console.logの下にconsole.log(navItem);で動きを確認すると、なんの反応もありません。

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

macを使用しています。

s8_chu

2020/02/18 19:48

質問文のソースコードだけでは、質問文に書かれている問題点を再現出来ませんでした。質問文の問題を再現出来るコードを追記していただけませんか？

kaaaarin

2020/02/19 14:30

検討していただき、ありがとうございます。解決いたしました。関係のあるコードを抜粋したので、漏れがあったのかもしれません。以後、気をつけます。またの機会にまたよろしくお願いいたします。

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

回答1件

ベストアンサー

querySelectorAll() は NodeList を返すので forEach() で回します。書いている場所も悪いので最後の } の直前にしてください。

JavaScript
1    document.addEventListener('DOMContentLoaded', () => {
2        navItem.forEach(n => {
3            n.addEventListener('click', () => {
4                toggle.click();
5            });
6        });
7    }, { once: true });