Question

我已经完成了在点击时显示div我希望在另一次点击时删除。我希望在另一次点击时删除div。

这是HTML代码

(\d{0,1}(?<!tiap\s)\d\s*(?:bulan|bln|hari|hr|Januari|Februari|Pebruari|Maret|April|Mei|Juni|Juli|Agustus|September|Oktober|Oktobr|November|Desember|January|February|Pebruary|March|April|May|June|July|Augustus|September|October|November|December|JAN|FEB|PEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC|Jan|Feb|Peb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec|Jan|Feb|Mar|Apr|Mei|Jun|Jul|Agu|Ags|Sep|Okt|Nov|Des)[\s]*[\d]*)

的Javascript

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

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

摆脱内联样式并使用类切换显示类型。这更清洁，您可以轻松地将其重复用于其他元素。

＆＃13;

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

＆＃13;

.invisible {
  display: none;
}

＆＃13;

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

＆＃13;

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"
    }
}

通过javascript隐藏div onclick

4 个答案: