クラスノードリストのイベントをトグルする方法

Question

クラスノードリストでJavaScriptイベントを切り替えようとしています。私は以下の問題の簡略版を完成させました。

初期イベントは実行されていますが、ボタンを赤に戻す2番目のイベントは機能していないようですか？ JSとCodepenへのリンクを以下に示します。

Codepenはここにある：https://codepen.io/emilychews/pen/EXmzbd?editors=1010

JS

var clicked = false; 

    var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); 

if (clicked === false) { 
    for (h = 0; h < $mainMenuButton.length; h+=1) { 
     $mainMenuButton[h].addEventListener('click', function (e){ 
     e.currentTarget.style.background = "black"; 
     clicked = true; // change clicked state to true 
     });  
    } 
} else { 
    for (i = 0; i < $mainMenuButton.length; i+=1) { 
     $mainMenuButton[i].addEventListener('click', function (e){ 
     e.currentTarget.style.background = "red"; 
     clicked = false; 
     }); 
    } 
} 

Answer 1

あなたはこれだけ仕事を得るために、1人のイベントリスナーが必要です。

var $mainMenuButton = document.getElementsByClassName('desktopmenubutton'); 
 

 

 
for (h = 0; h < $mainMenuButton.length; h += 1) { 
 
    $mainMenuButton[h].addEventListener('click', function(e) { 
 
    if (e.currentTarget.style.backgroundColor == "red" || e.currentTarget.style.backgroundColor == "") { 
 
     e.currentTarget.style.backgroundColor = "black"; 
 
    } else { 
 
     e.currentTarget.style.backgroundColor = "red"; 
 
    } 
 
    }); 
 
}

* {font-family: arial;} 
 

 
.desktopmenubutton { 
 
    width: 150px; 
 
    height: 100px; 
 
    background-color: red; 
 
    position: absolute; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    color: white 
 
} 
 

 
.button2 { 
 
    left: 300px; 
 
}

<div class="desktopmenubutton button1">Button 1</div> 
 
<div class="desktopmenubutton button2">Button 2</div>