Javascriptでこのメソッドを使用してDIVを表示および非表示にするにはどうすればよいですか？

Question

私はデータ・テキスト・スワップ・メソッド（オンラインで見つけたもの）を使用してテキストを変更するようにプログラムしたボタンを使用してDIVを表示および非表示にしようとしています。私のDIVは、CSSでは 'display：none'に設定されていますが、Javascriptを使用してこれを変更したいと思います。私のコードで何が間違っていますか？

var showMixerBtn = document.getElementById("showMixer"); 
 
\t \t showMixerBtn.addEventListener("click", showMixerBtnActions); 
 

 
\t \t function showMixerBtnActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t var mixerSliders = document.getElementById("mixerSliders"); 
 
\t \t mixerSliders.addEventListener("click", showMixerActions); 
 

 
\t \t function showMixerActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-original")) { 
 
\t \t \t \t mixerSliders.style.display = "block"; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t mixerSliders.style.display = "none"; 
 
\t \t \t } 
 
\t \t }

div#mixerSliders { 
 
\t \t \t display: none; 
 
\t \t }

<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> 
 

 
<div id="mixerSliders"> 
 
\t \t <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> 
 
\t </div>

Answer 1

var showMixerBtn = document.getElementById("showMixer"); 
 
\t \t showMixerBtn.addEventListener("click", showMixerBtnActions); 
 

 
\t \t function showMixerBtnActions() { 
 
\t \t \t if (showMixerBtn.getAttribute("data-text-swap") == showMixerBtn.innerHTML) { 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-original"); 
 
     mixerSliders.style.display = "none"; 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t showMixerBtn.setAttribute("data-text-original", showMixerBtn.innerHTML); 
 
\t \t \t \t showMixerBtn.innerHTML = showMixerBtn.getAttribute("data-text-swap"); 
 
     mixerSliders.style.display = "block"; 
 
\t \t \t } 
 
\t \t }

div#mixerSliders { 
 
\t \t \t display: none; 
 
\t \t } 
 

 
.gainSliders { 
 
    border: 2px inset brown; 
 
}

<button id="showMixer" data-text-swap="Hide Mixer">Show Mixer</button> 
 

 
<div id="mixerSliders"> 
 
\t \t <canvas class="gainSliders" id="kickSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="snareSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="clapSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="cHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="oHatSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="tomSlider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc1Slider" nx="slider"></canvas> 
 
\t \t <canvas class="gainSliders" id="perc2Slider" nx="slider"></canvas> 
 
\t </div>

これは、テキストの変更やスライドショーを作成したり、必要に応じて非表示になります。

Answer 2

あなたはjqueryのを使用していると私はあなたがトグル機能を使用することができ、むしろ、表示なしを使用していないよりも、異なっていた、それ意志簡単なものまで

$(document).ready(function(){ 
 
    $("#hide").click(function(){ 
 
    
 
     
 
    \t \t \t \t \t \t var el = $(this); 
 
    \t \t \t \t \t \t el.text() == el.data("text-swap") 
 
    \t \t \t \t \t ? el.text(el.data("text-original")) 
 
    \t \t \t \t \t : el.text(el.data("text-swap")); 
 
\t \t \t \t 
 
     $("p").toggle(); 
 
     
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
<body> 
 

 
<p>If you click on the "Hide" button, I will disappear.</p> 
 

 
<button id="hide" data-text-swap="Hide" data-text-original="Show">Hide</button> 
 

 

 
</body>