Jsでメニュー表示。classlistのエラーが解除されません。

前提・実現したいこと

ボタンをクリックしたらメニュー画面を表示するようにしたいのですがエラーが解除されなくて困っています。
メニュー画面にdisplay:none;を設定し、ボタンを押すとdisplay:none;が取り除かれて表示される仕組みです。
classlistエラーが解除されません。

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

エラーメッセージ
unko.js:9 Uncaught TypeError: Cannot read property 'classList' of null
    at HTMLElement.<anonymous> (unko.js:9)

該当のソースコード

HTML,CSS,Jsの

Javascript
1
2
3
4
5'use strict'
6
7{
8let btn= document.getElementById('btn');
9let back=document.getElementById('menuBack')
10
11btn.addEventListener('click', () => {
12  back.classList.remove('on')
13})
14}
15
16

CSS
1
2
3body {
4font-family:serif;
5
6}
7
8.w{
9  margin: 0 20%;
10
11}
12
13.category{
14  margin-top:  200px;
15
16}
17
18p{
19color:dimgrey;
20transition: 0.5s all;
21}
22
23p:hover{
24  color: black;
25}
26
27
28
29img,video{
30  cursor: pointer;
31  opacity: 1;
32  transition: all 0.5s;
33}
34img:hover,video:hover{
35  cursor: pointer;
36  opacity: 0.8;
37}
38
39header  div{
40  height: 100px;
41  background-color: white;
42  width: 100%;
43  position: fixed;
44  z-index: 1;
45  top: 0;
46  opacity: 0.8;
47
48}
49
50#menuBack{
51  opacity: 0.7;
52  position: fixed;
53  background-color: black;
54  top: 0;
55  right: 0;
56  left:0;
57  bottom:0;
58}
59
60.on{
61    display: none;
62}
63
64i{
65  color:gray;
66}
67
68.fa-bars{
69  display:none;
70}
71
72h1,h3{
73  text-align: center;
74  color:limegreen;
75}
76
77h1:hover,h3:hover{
78  text-align: center;
79  color:red;
80  transition: 0.5s all;
81}
82
83h4{
84  color: gray;
85}
86
87.logo{
88  margin:0;
89  height: 100px;
90}
91
92.logo2{
93  margin:0;
94  height: 100px;
95  display: none;
96}
97
98.about-w{
99  display: flex;
100}
101.about-w img{
102  width: 30%;
103  height: 30%;
104
105}
106
107.about-w p{
108  width: 50%;
109  margin: 0 10%;
110  margin:auto;
111
112}
113
114.content{
115  width: 80%;
116  margin:100px auto;
117
118
119  border-radius: 10px;
120  margin: 50px auto;
121}
122
123.headImg{
124  width: 100%;
125}
126
127.headImg2{
128  width: 100%;
129  display: none;
130}
131
132.skill-parent{
133  display: flex;
134}
135
136.skill-child{
137  width: 46%;
138  margin: 0 2%;
139}
140
141.skill-child i{
142  width: 100%;
143  text-align: center;
144  font-size: 100px;
145}
146
147.skill-child h4{
148  text-align: center;
149}
150
151.work1{
152  display: flex;
153}
154
155.work1 img{
156  width: 31%;
157  margin: 2%;
158  border: 1px solid #ccc;
159}
160
161.work2{
162  display: flex;
163}
164
165.work2 img:first-child{
166  width: 70%;
167}
168
169.work2 img:last-child{
170  width: 30%;
171}
172
173
174.contact-w{
175  display: flex;
176
177}
178.contact-w img{
179  width: 30%;
180
181
182
183
184}
185
186.contact-w p{
187  width: 50%;
188  margin: auto 10%;
189
190
191
192}
193@media(max-width:1000px) {
194  .w{
195    margin: 0 0%;
196
197  }
198
199  .category{
200    margin-top:  100px;
201
202  }
203
204
205
206  .headImg{
207    width: 100%;
208    display:none;
209  }
210
211  .headImg2{
212    width: 100%;
213    display: block;
214  }
215
216  .fas{
217    display:block;
218    line-height:120px;
219    font-size: 50px;
220    float: left;
221  }
222
223  video{
224    display: none;
225  }
226
227  .content{
228    width: 95%;
229    margin:2.5%;
230
231    border-radius: 10px;
232
233  }
234
235  header  div{
236    height: 120px;
237    background-color: white;
238    width: 100%;
239    z-index: 1;
240    top: 0;
241  }
242
243  .logo{
244    margin:0;
245    height: 70px;
246    display: none;
247  }
248
249  .logo2{
250    margin:0 100px;
251    height: 100px;
252    display:block;
253    float: right;
254  }
255
256  .about-w img{
257    width: 30%;
258    height: 30%;
259
260  }
261
262  .about-w p{
263    width: 65%;
264    margin: 0 2.5%;
265    margin:auto;
266
267  }
268
269
270
271
272.skill-parent{
273  display:block;
274}
275
276.skill-child{
277  width: 96%;
278  margin: 0 2%;
279}
280
281.skill-child i{
282  width: 100%;
283  text-align: center;
284  font-size: 100px;
285}
286
287
288.work1{
289  display: block;
290}
291
292.work1 img{
293width: 90%;
294margin: 5%;
295  }
296
297
298.work2 img:first-child{
299      width: 90%;
300      margin: 5%;
301    }
302.work2 img:last-child{
303      width: 0%;
304    }
305
306.contact-w p{
307      width: 75%;
308      margin: auto 2.5%;
309      font-size: 18px;
310    }
311.contact-w img{
312      width: 20%;
313      height: 30%;
314
315}
316}
317
318

HTML
1
2 <!DOCTYPE html>
3<html lang="ja">
4  <head>
5    <meta charset="utf-8">
6    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
7    <link rel="stylesheet" href="style.css">
8    <title>ぽーとふぉりお</title>
9  </head>
10  <header>
11
12    <div>
13
14
15        <i class="fas fa-bars " id="btn"></i>
16  <video class="logo" src="logo.mp4" loop autoplay  muted ></video>
17  <img class="logo2" src="logo2.png" alt="">
18      </div>
19
20      <video class="headImg" src="head.mp4" loop autoplay  muted></video>
21      <img  class="headImg2" src="head.png" alt="">
22
23  </header>
24  <body>
25<div class="w">
26
27  <div class="on" id="menuBack ">
28
29  </div>
30<div class="category">
31<h1>About</h1>
32<p>主にweb制作のお仕事をメインで活動しており、ゲーム作成なども行っております。
33  現在閲覧していただいてるポートフォリオはWordpressなどの外部サービスに頼らず、
34  0からコーディング、デザインしております。
35  またフリーランスの為、お客様と円滑かつ迅速な対応や作業を行うことができます。<br><br>
36
37</p>
38<div class="about-w">
39  <img src="about.png" alt="">
40    <p>
41
42    名称 ：ハセガワ　ユウヤ　Hasegawa Yuya<br>
43    所在地 ：東京都内<br>
44    お問い合わせ ：nemu.oto0106@gmail.com<br>
45    事業内容 ：Web、アプリ制作、HTML,CSS,JavaScriptコーディング<br>
46
47
48  </p>
49
50</div>
51
52
53<div class="category">
54<h1>Service</h1>
55<h3>～HTML、CSS、JavaScript～</h3>
56<div class="skill-w">
57  <div class="skill-parent">
58    <div class="skill-child">
59      <h4>Cording</h4>
60      <i class="fas fa-code"></i>
61      <p>ただコーディングするだけでなく、カスタマイズや修正しやすいようエディタの配列にまでこだわってコーディングいたします。
62      レスポンシブ対応も得意です。</p>
63    </div>
64    <div class="skill-child">
65      <h4>Teaching</h4>
66      <i class="fas fa-chalkboard-teacher"></i>
67      <p>teratailというサイトでプログラミングの指導を行っています。webサイトの作り方はもちろん、コードの修正やアドバイスなども全力でサポートいたします。</p>
68    </div>
69</div>
70
71
72
73</div>
74</div>
75</div>
76
77<div class="category">
78<h1>Work</h1>
79<h3>～web制作～</h3>
80
81<div class="work1">
82<img  src="atu.png" alt="">
83<img src="eng.png" alt="">
84<img src="sibu.png" alt="">
85
86</div>
87<p class="content">
88主にHTML,CSS,JavaScriptを使い、多くのサイトのコーディングを行ってまいりました。<br>
89メディアクエリという技術を使い、すべてのデバイスにレスポンシブ対応させることができます。<br>
90コーディングだけでなくwebデザインの仕事も承っております。
91</p>
92
93<h3>～Javascriptを使ったゲーム制作～</h3>
94
95<div class="work2">
96<img src="quiz.png" alt="">
97<img src="quiz2.png" alt="">
98</div>
99<p class="content">
100JavaScriptを活用し、ミニゲームの作成を行っています。
101ゲーム作成の技術を活用し、動きのあるwebサイトに仕上げることができます。
102スマホのアプリに対応させる為に活動中。
103</p>
104</div>
105
106
107
108<div class="category">
109<h1>Cotact</h1>
110
111
112<div class="contact-w">
113  <img src="about.png" alt="">
114  <p>
115    名称 ：ハセガワ　ユウヤ　Hasegawa Yuya<br>
116    所在地 ：東京都内<br>
117    お問い合わせ ：nemu.oto0106@gmail.com<br>
118    事業内容：Web、アプリ制作、HTML,CSS,JavaScriptコーディング<br>
119
120
121  </p>
122
123</div>
124</div>
125</div>
126
127<script src="unko.js">
128
129</script>
130
131  </body>
132
133</html>
134
135
136