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

前提・実現したいこと

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

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

該当のソースコード

HTML
<body id="page-top">
<header id="top">
<!-- ハンバーガーボタン -->
<div id="nav-btn"><span></span></div>
 
<!-- ナビゲーションメニュー -->
<div id="nav-area">
<nav>
<div class="dis-tbl_tab02 w1200 m-0a">
<a href="#" class="dis-tblcl01">HOME</a>
<a href="#" class="dis-tblcl01">ABOUT US<span class="dis-non">（アクアマリーナについて）</span></a>
<a href="#" class="dis-tblcl01">QUALITY<span class="dis-non">（徹底した品質管理）</span></a>
<div class="dis-tblcl02"><span class="arrow-b">PRODUCTS</span>
<ul id="fade-in2">
<li><a href="#">ISUP<span class="dis-non">（スタンドアップパドルボード）</span></a></li>
<li><a href="#">KAYAKS<span class="dis-non">（カヤック）</span></a></li>
<li><a href="#">BOATS<span class="dis-non">（ゴムボート）</span></a></li>
<li><a href="#">ACCESSORY<span class="dis-non">（アクセサリー）</span></a></li>
</ul>
</div>
<a href="#" target="_blank" class="dis-tblcl01"><span class="outlink">NEWS</span></a>
<a href="shop/" class="dis-tblcl01">SHOP</a>

<div class="dis-tblcl02"><span class="arrow-b">SUPPORT</span>
<ul id="fade-in3">
<li><a href="#">FAQ（よくある質問）</a></li>
<li><a href="#">製品の保証について</a></li>
<li><a href="#">ユーザーマニュアル</a></li>
</ul>
</div>

<div class="dis-tblcl03">
<a href="#" target="_blank"><span>Instagram</span></a>
</div>

</div><!-- /.dis-tbl_tab02 -->

<p id="nav-btn_cl"></p>
</nav>
</div>
 
</header>
</body>

javascript
(function () {

window.onpageshow = function(event) {
    if (event.persisted) {
         window.location.reload();
     }
};

    const target0 = document.getElementById('nav-btn');
    const target1 = document.getElementById('nav-btn_cl');
    const target2 = document.getElementById('nav-area');
    const target3 = document.getElementById('page-top');


if (target0) {
  target0.addEventListener('click', function(){
    
    target0.classList.toggle('close');
    target1.classList.toggle('close');
    target2.classList.toggle('slide-in');
    target3.classList.toggle('noscroll');
    
  }, false);
  
}

if (target1) {
  target1.addEventListener('click', function(){
    
    target0.classList.toggle('close');
    target1.classList.toggle('close');
    target2.classList.toggle('slide-in');
    target3.classList.toggle('noscroll');
    
  }, false);
  
}

}());

css
.w1200 {max-width: 1200px;}
a{color: #000; text-decoration: underline;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}
a:hover {color: #ec1b23;}

/* グローバルメニュー */
nav {background: #3d3d3d;}
nav .dis-tbl_tab02 {padding:0 15px; font-family: Midashi Go MB31;}
nav .dis-tblcl01 {vertical-align: middle;}
nav .dis-tblcl02 {
	position: relative; padding:10px 0;
	color: #fff; font-size: 15px; text-align: center; 
	vertical-align: middle;}
    
nav a{
	margin: 0; color: #fff; font-size: 15px; 
	text-align: center; text-decoration: none; line-height: 1;}
nav a:hover {color: #fff;}

nav a.dis-tblcl01:hover {background:#ec1b23;}
nav a.dis-tblcl03:hover {opacity: 0.75;}


@media screen and (max-width:799px) and (min-width:700px){
nav .dis-tblcl02 {width: 110px;}
}

@media screen and (max-width: 699px){
nav {background: #fff;}

nav .dis-tbl_tab02,
nav .dis-tblcl01,
nav .dis-tblcl02,
nav .dis-tblcl03 {display: block; box-sizing: border-box; width: 100%; text-align: left;}

nav a {
    display: block; padding: 15px 10px; border-bottom:solid #515859 1px; 
    color: #515859; text-align:left;}

nav a span.dis-non {display: inline;}

nav .dis-tbl_tab02 {padding:15px;}
nav .dis-tblcl02,
nav .dis-tblcl03 {padding:0;}

nav .dis-tblcl02 span {display:none;}
nav .dis-tblcl02 span.dis-non {display: inline;}

nav .dis-tblcl03 a { box-sizing: border-box; width: 100%; height:auto; background:none; text-indent:0;}
nav .dis-tblcl03 span {position: relative; display: inline-block; padding:0 18px 0 0;}
nav .dis-tblcl03 span:after {
    content: url("../images/gaibu_bk.png"); 
    display: inline-block; position:absolute; top:50%; right:0; margin:-7px 0 0;}

/**============================================================================================**/
/* javascriptを使用したハンバーガーボタン */
#nav-btn {
    display: block; position: absolute; top: 16px; right: 10px; z-index: 3;
    width: 28px; height: 28px;
    cursor: pointer;}

#nav-btn.close {
    position: fixed; right: 300px; z-index: 10001;
    width: 100vw; height: 100vh;}

#nav-btn::before,
#nav-btn::after,
#nav-btn span {
    content: '';
    display: block; position: absolute; left: 0px;
    width: 28px; height: 4px;
    background: #e5f7fb;}
    
#nav-btn::before {top: 0px;}
#nav-btn::after {bottom: 0px;}
#nav-btn span {top: 50%; margin: -2px 0 0;}

#nav-btn.close::before,
#nav-btn.close::after,
#nav-btn.close span { display: none;}


/* 閉じるボタン */
#nav-btn_cl {    
    display: block; position: absolute; top: 18px; right: 10px; z-index: 10003;
    width: 28px; height: 28px;
    cursor: pointer;}

#nav-btn_cl::before,
#nav-btn_cl::after {
    content: '';
    display: block; position: absolute; top: 50%; left: 50%;
    width: 28px; height: 4px;
    background: #1fc08e;}
    
#nav-btn_cl::before  {
    transform: translateX(-50%) translateY(-3px) rotate(45deg);
    -webkit-transform: translateX(-50%) translateY(-3px) rotate(45deg);}
    
#nav-btn_cl::after {
    transform: translateX(-50%) translateY(-3px) rotate(-45deg);
    -webkit-transform: translateX(-50%) translateY(-3px) rotate(-45deg);}


/* グローバルメニュー表示エリア */
#nav-area {
    position: fixed; top: 0; left: 0; z-index: 10000;
    width: 0vw; height: 100vh;
    background: rgba(0,0,0,0.00);
    transition: background 0.8s;}

#nav-area.slide-in {
    width: 100vw; 
    background: rgba(0,0,0,0.40);
    transition: background 0.8s;}

#nav-area nav {
    position: fixed; top: 0; left: auto; right: 0; z-index: 10002;
    width: 300px; height: 100%;
    background: #fff;
    transform: translateX(100%);
    transition: 0.8s;}

#nav-area.slide-in nav {
    transform: translateX(0);
    transition: 0.8s;}

}

@media screen and (max-width:499px){
#nav-btn.close {width: 0;}
#nav-area nav { width: 100%;}
}

試したこと

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

javascript
const getId = ['nav-btn','nav-btn_cl','nav-area','page-top'];
const byClass = ['close','close','slide-in','noscroll'];

for (let number = 0; number <= 3; number ++) {
    const target(number) = document.getElementById(getId[number]);
}

for (let number1 = 0; number <= 3; number ++) {
    if (target0) {
        target0.addEventListener('click', function(){
            target(number1).classList.toggle(byClass[number1]);
        }, false);  
    }  

    if (target1) {
        target1.addEventListener('click', function(){
            target(number1).classList.toggle(byClass[number1]);
        }, false);
    }
}