javascriptの記述をシンプルにする

前提・実現したいこと

スマホ用のハンバーガーボタンの「開く」、「閉じる」をjavascriptで記述しました。
現状、動くには動くのですが、javascriptの記述をもっとシンプルにしたいです。

「for文と配列使えば上手くいくのでは？」と思い、試行錯誤しているのですが、難航しています。
javascriptは勉強中の為、あまり詳しくはありません。
ご助言して頂けたら幸いです。

該当のソースコード

HTML
1<body id="page-top">
2<header id="top">
3<!-- ハンバーガーボタン -->
4<div id="nav-btn"><span></span></div>
5 
6<!-- ナビゲーションメニュー -->
7<div id="nav-area">
8<nav>
9<div class="dis-tbl_tab02 w1200 m-0a">
10<a href="#" class="dis-tblcl01">HOME</a>
11<a href="#" class="dis-tblcl01">ABOUT US<span class="dis-non">（アクアマリーナについて）</span></a>
12<a href="#" class="dis-tblcl01">QUALITY<span class="dis-non">（徹底した品質管理）</span></a>
13<div class="dis-tblcl02"><span class="arrow-b">PRODUCTS</span>
14<ul id="fade-in2">
15<li><a href="#">ISUP<span class="dis-non">（スタンドアップパドルボード）</span></a></li>
16<li><a href="#">KAYAKS<span class="dis-non">（カヤック）</span></a></li>
17<li><a href="#">BOATS<span class="dis-non">（ゴムボート）</span></a></li>
18<li><a href="#">ACCESSORY<span class="dis-non">（アクセサリー）</span></a></li>
19</ul>
20</div>
21<a href="#" target="_blank" class="dis-tblcl01"><span class="outlink">NEWS</span></a>
22<a href="shop/" class="dis-tblcl01">SHOP</a>
23
24<div class="dis-tblcl02"><span class="arrow-b">SUPPORT</span>
25<ul id="fade-in3">
26<li><a href="#">FAQ（よくある質問）</a></li>
27<li><a href="#">製品の保証について</a></li>
28<li><a href="#">ユーザーマニュアル</a></li>
29</ul>
30</div>
31
32<div class="dis-tblcl03">
33<a href="#" target="_blank"><span>Instagram</span></a>
34</div>
35
36</div><!-- /.dis-tbl_tab02 -->
37
38<p id="nav-btn_cl"></p>
39</nav>
40</div>
41 
42</header>
43</body>

javascript
1(function () {
2
3window.onpageshow = function(event) {
4    if (event.persisted) {
5         window.location.reload();
6     }
7};
8
9    const target0 = document.getElementById('nav-btn');
10    const target1 = document.getElementById('nav-btn_cl');
11    const target2 = document.getElementById('nav-area');
12    const target3 = document.getElementById('page-top');
13
14
15if (target0) {
16  target0.addEventListener('click', function(){
17    
18    target0.classList.toggle('close');
19    target1.classList.toggle('close');
20    target2.classList.toggle('slide-in');
21    target3.classList.toggle('noscroll');
22    
23  }, false);
24  
25}
26
27if (target1) {
28  target1.addEventListener('click', function(){
29    
30    target0.classList.toggle('close');
31    target1.classList.toggle('close');
32    target2.classList.toggle('slide-in');
33    target3.classList.toggle('noscroll');
34    
35  }, false);
36  
37}
38
39}());

css
1.w1200 {max-width: 1200px;}
2a{color: #000; text-decoration: underline;
3	-webkit-transition: all 0.5s;
4	-moz-transition: all 0.5s;
5	-ms-transition: all 0.5s;
6	-o-transition: all 0.5s;
7	transition: all 0.5s;}
8a:hover {color: #ec1b23;}
9
10/* グローバルメニュー */
11nav {background: #3d3d3d;}
12nav .dis-tbl_tab02 {padding:0 15px; font-family: Midashi Go MB31;}
13nav .dis-tblcl01 {vertical-align: middle;}
14nav .dis-tblcl02 {
15	position: relative; padding:10px 0;
16	color: #fff; font-size: 15px; text-align: center; 
17	vertical-align: middle;}
18    
19nav a{
20	margin: 0; color: #fff; font-size: 15px; 
21	text-align: center; text-decoration: none; line-height: 1;}
22nav a:hover {color: #fff;}
23
24nav a.dis-tblcl01:hover {background:#ec1b23;}
25nav a.dis-tblcl03:hover {opacity: 0.75;}
26
27
28@media screen and (max-width:799px) and (min-width:700px){
29nav .dis-tblcl02 {width: 110px;}
30}
31
32@media screen and (max-width: 699px){
33nav {background: #fff;}
34
35nav .dis-tbl_tab02,
36nav .dis-tblcl01,
37nav .dis-tblcl02,
38nav .dis-tblcl03 {display: block; box-sizing: border-box; width: 100%; text-align: left;}
39
40nav a {
41    display: block; padding: 15px 10px; border-bottom:solid #515859 1px; 
42    color: #515859; text-align:left;}
43
44nav a span.dis-non {display: inline;}
45
46nav .dis-tbl_tab02 {padding:15px;}
47nav .dis-tblcl02,
48nav .dis-tblcl03 {padding:0;}
49
50nav .dis-tblcl02 span {display:none;}
51nav .dis-tblcl02 span.dis-non {display: inline;}
52
53nav .dis-tblcl03 a { box-sizing: border-box; width: 100%; height:auto; background:none; text-indent:0;}
54nav .dis-tblcl03 span {position: relative; display: inline-block; padding:0 18px 0 0;}
55nav .dis-tblcl03 span:after {
56    content: url("../images/gaibu_bk.png"); 
57    display: inline-block; position:absolute; top:50%; right:0; margin:-7px 0 0;}
58
59/**============================================================================================**/
60/* javascriptを使用したハンバーガーボタン */
61#nav-btn {
62    display: block; position: absolute; top: 16px; right: 10px; z-index: 3;
63    width: 28px; height: 28px;
64    cursor: pointer;}
65
66#nav-btn.close {
67    position: fixed; right: 300px; z-index: 10001;
68    width: 100vw; height: 100vh;}
69
70#nav-btn::before,
71#nav-btn::after,
72#nav-btn span {
73    content: '';
74    display: block; position: absolute; left: 0px;
75    width: 28px; height: 4px;
76    background: #e5f7fb;}
77    
78#nav-btn::before {top: 0px;}
79#nav-btn::after {bottom: 0px;}
80#nav-btn span {top: 50%; margin: -2px 0 0;}
81
82#nav-btn.close::before,
83#nav-btn.close::after,
84#nav-btn.close span { display: none;}
85
86
87/* 閉じるボタン */
88#nav-btn_cl {    
89    display: block; position: absolute; top: 18px; right: 10px; z-index: 10003;
90    width: 28px; height: 28px;
91    cursor: pointer;}
92
93#nav-btn_cl::before,
94#nav-btn_cl::after {
95    content: '';
96    display: block; position: absolute; top: 50%; left: 50%;
97    width: 28px; height: 4px;
98    background: #1fc08e;}
99    
100#nav-btn_cl::before  {
101    transform: translateX(-50%) translateY(-3px) rotate(45deg);
102    -webkit-transform: translateX(-50%) translateY(-3px) rotate(45deg);}
103    
104#nav-btn_cl::after {
105    transform: translateX(-50%) translateY(-3px) rotate(-45deg);
106    -webkit-transform: translateX(-50%) translateY(-3px) rotate(-45deg);}
107
108
109/* グローバルメニュー表示エリア */
110#nav-area {
111    position: fixed; top: 0; left: 0; z-index: 10000;
112    width: 0vw; height: 100vh;
113    background: rgba(0,0,0,0.00);
114    transition: background 0.8s;}
115
116#nav-area.slide-in {
117    width: 100vw; 
118    background: rgba(0,0,0,0.40);
119    transition: background 0.8s;}
120
121#nav-area nav {
122    position: fixed; top: 0; left: auto; right: 0; z-index: 10002;
123    width: 300px; height: 100%;
124    background: #fff;
125    transform: translateX(100%);
126    transition: 0.8s;}
127
128#nav-area.slide-in nav {
129    transform: translateX(0);
130    transition: 0.8s;}
131
132}
133
134@media screen and (max-width:499px){
135#nav-btn.close {width: 0;}
136#nav-area nav { width: 100%;}
137}

試したこと

target0~3が数字なのでfor文を使ってtargetの数字の部分を変えようとしました。
また、.classList.toggleで使っているclass名を配列にして使う予定でした。
※そもそも書き方が間違っているかもしれません。ご容赦下さい。

javascript
1const getId = ['nav-btn','nav-btn_cl','nav-area','page-top'];
2const byClass = ['close','close','slide-in','noscroll'];
3
4for (let number = 0; number <= 3; number ++) {
5    const target(number) = document.getElementById(getId[number]);
6}
7
8for (let number1 = 0; number <= 3; number ++) {
9    if (target0) {
10        target0.addEventListener('click', function(){
11            target(number1).classList.toggle(byClass[number1]);
12        }, false);  
13    }  
14
15    if (target1) {
16        target1.addEventListener('click', function(){
17            target(number1).classList.toggle(byClass[number1]);
18        }, false);
19    }
20}

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

回答1件

ベストアンサー

変数名を実行中のプログラム内で作ることはできないので、配列にしてはいかがでしょうか。

js
1const targets = getId.map(id => document.getElementById(id));
2
3function toggle() {
4  for (let i = 0; i < targets.length; ++i)
5    targets[i].classList.toggle(byClass[i]);
6}
7
8targets[0]?.addEventListener('click', toggle, false);
9targets[1]?.addEventListener('click', toggle, false);

投稿2022/01/28 09:05

編集2022/02/04 02:01

int32_t

総合スコア20884

MskKmt

2022/02/04 01:39

返答が遅くなって申し訳ありません。ご回答いただきありがとうございます。ご回答いただいたjsをローカルのテスト用ページに設置して動作確認をしたのですが、動きませんでした。 Chromeの検証で確認したところ、「Uncaught TypeError: targets[0]?.addEventListener is not a function at Untitled-1.html:84:13」と表示されていました。