javascriptでdivをオンクックで隠す

Question

クリックしてdivを表示していますが、別のクリックで削除したいと思います。別のクリックでdivを削除したいここで

は、HTMLコード

<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div> 
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" /> 

はJavascript

ある

function showDiv() { 
     document.getElementById('welcomeDiv').style.display = "block"; 
    } 

Answer 1

あなたはdiv要素の可視性をチェックし、それに基づいてトグルを行う必要があります。

function showDiv() { 
    if(document.getElementById('welcomeDiv').style.display == "none") { 
     document.getElementById('welcomeDiv').style.display = "block"; 
    } 
    else { 
     document.getElementById('welcomeDiv').style.display = "none" 
    } 
} 

Answer 2

インラインスタイリングを削除し、クラスを使用して表示タイプを切り替えます。これはよりクリーンで他の要素にも簡単に再利用できます。

function showDiv(element) { 
 
    document.querySelector(element).classList.toggle("invisible"); 
 
}

.invisible { 
 
    display: none; 
 
}

<div id="welcomeDiv" class="answer_list invisible"> WELCOME</div> 
 
<input type="button" name="answer" value="Show Div" onclick="showDiv('#welcomeDiv')" />

Answer 3

function showDiv() { 
 
    var element = document.getElementById('welcomeDiv'); 
 
    if(!element.classList.contains('show')){ 
 
    element.classList.add('show'); 
 
    } else { 
 
    element.classList.remove('show'); 
 
    } 
 
     
 
     
 
}

.show { 
 
    display: block !important; 
 
}

<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div> 
 
    <input type="button" name="answer" value="Show Div" onclick="showDiv()" />

Answer 4

チェックDIVの現在の可視性のためとJavaScript関数は、それに応じて行いましょう。

function showDiv() { 
    if(document.getElementById('welcomeDiv').style.display == "none") { 
     //If it is not visible, make it visible 
     document.getElementById('welcomeDiv').style.display = "block"; 
    } 
    else { 
     //Else, make it invisible. 
     document.getElementById('welcomeDiv').style.display = "none" 
    } 
}