使用嚴格的JavaScript隱藏和顯示DIV，沒有嵌入的JS或CSS

Question

我已經搜索和搜索了很多以前回答的問題，令我驚訝的是，他們中沒有人回答我想要完成的任務。與JQuery這很容易，但我正在努力與嚴格的JavaScript。

我不能有任何嵌入JS或CSS在HTML ...

這是我到目前爲止有：

function showhide() 
{ 
    var billingaddress = document.getElementById("billingaddress"); 
    if (billingaddress.style.display === "block") 
     { 
      billingaddress.style.display = "none"; 
     } 
    else if (billingaddress.style.display === "none") 
     { 
      billingaddress.style.display = "block"; 
     } 
} 

function init() 
{ 
    var billingcheckbox = document.getElementById("billing"); 

    if (billingcheckbox.checked) 
     { 
      showhide(); 
     } 
    else 
     { 
      showhide(); 
     } 

它默認是使用CSS隱藏。

乾杯，

Answer 1

隨着他提供的代碼，它可以這樣做。

billingaddress.style.display默認情況下爲空，您可以在沒有比較的情況下輕鬆檢查它。

function showhide() { 
 
    if (billingaddress.style.display) billingaddress.style.display = "" 
 
    else billingaddress.style.display = 'none'; 
 
} 
 

 
var billingaddress = document.getElementById("billingaddress") 
 
var billingcheckbox = document.getElementById("billing") 
 
billingcheckbox.addEventListener('change', showhide) 
 
billingcheckbox.checked = true 
 
showhide()

<input type="checkbox" id="billing"/> Hide 
 
<div id="billingaddress">Lorem Ipsum</div>

Answer 2

這是因爲這很容易：

事件處理中，this關鍵字引用checkbox元素，讓你可以複選框狀態this.checked財產。

<input type="checkbox" id="billing"> 
 
<input type="text" id="billingaddress" placeholder="Address" style="display:none"> 
 
<script> 
 
    var billingAddress = document.getElementById("billingaddress"); 
 
    var billingCheckbox = document.getElementById("billing"); 
 

 
    billingCheckbox.addEventListener('click', function(event) { 
 
    billingAddress.style.display = this.checked ? "block" : "none"; 
 
    }) 
 
</script>

Answer 3

下面的代碼應該這樣做 - 但可以肯定確保所有的ID是什麼是HTML標記匹配起來：

function showhide(show) { 

    var billingaddress = document.getElementById("billingaddress"); 

    if (show) { 

     billingaddress.style.display = "block"; 

    } else {  

     billingaddress.style.display = "none"; 
    } 
} 

function init() { 

    var billingcheckbox = document.getElementById("billing"); 

    if (billingcheckbox.checked) { 

     showhide(true); 

    } else {  

     showhide(false); 
    } 
}