JSまたはCSSが組み込まれていない厳格なjavascriptを使用してDIVを表示および非表示する

Question

これまでに多くの質問を検索して検索しましたが、驚いたことにそのうちの誰も私が達成しようとしているものに答えません。 JQueryでこれは簡単ですが、私は厳格なjavascriptで苦労しています。

は私が

これは私がこれまで持っているものです... HTMLに埋め込まれJSやCSSを持つことはできません。

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はデフォルトでは空ですが、比較せずにifで簡単に確認できます。

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.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); 
    } 
}