トグル時にhtmlコントロールが表示/非表示にされない

Question

時間条件が真である時に応じて、いくつかのhtmlコントロールが表示されないようにしようとしています。

次のように私のコントロールは、次のとおりです。次のように

<span id="t"><button id="ctr">Centre Map</button></span><span id="t2"><form name="Follow"><input type="checkbox" id ="FT" name="FT" onclick = "TitanicCheckBox(this)"><span id="FTText">Follow</span></form></span> 

そして、私のトグル制御は、次のとおりです。

function HideControls(tof) 
{ 
    if (tof==true) // hide and remove area where controls would be 
    { 

    document.getElementById("t").style.display = "none"; 
    document.getElementById("FT").style.display = "none"; 
    document.getElementById("FTText").style.display = "none"; 
    } 
    else 
    { 

    document.getElementById("t").style.display = "all"; 
    document.getElementById("FT").style.display = "all"; 
    document.getElementById("FTText").style.display = "all"; 
    } 
} 

条件が入力された「IF」関数が呼び出され、正しいされている（HideControls（偽）;）、コントロールはトグルされていません。私は何を間違えたのですか？

Answer 1

質問は本当に明確ではありませんでしたが、これは達成しようとしていることですか？ディスプレイプロパティで

function HideControls(tof) 
 
{ 
 
    if (tof.checked==true) // hide and remove area where controls would be 
 
    { 
 

 
    document.getElementById("t").style.display = "none"; 
 
    document.getElementById("FT").style.display = "none"; 
 
    document.getElementById("FTText").style.display = "none"; 
 
    } 
 
    else 
 
    { 
 

 
    document.getElementById("t").style.display = "all"; 
 
    document.getElementById("FT").style.display = "all"; 
 
    document.getElementById("FTText").style.display = "all"; 
 
    } 
 
}

<span id="t"><button id="ctr">Centre Map</button></span><span id="t2"><form name="Follow"><input type="checkbox" id ="FT" name="FT" onclick = "HideControls(this)"><span id="FTText">Follow</span></form></span>

Answer 2

、値allは存在しません。 blockまたはinitialを使用してください。

参考：https://www.w3schools.com/cssref/pr_class_display.asp

Answer 3

あなたは非常にあなたのHideControls方法を短くすることができますいくつかのポインタ：あなたの関数外の変数で

• キャッシュがあなたのDOM要素。つまり、関数が呼び出されるたびにgetElementByIdを使用する必要はありません。

• .style.display = 'none'および.style.display = ''を使用して、コントロールをそれぞれ非表示および表示します。

• if-elseステートメントの代わりに3項演算子を使用します。この場合は、すべての変数を(tof ? 'none' : '')に設定するのがはるかに簡潔です。

var $t = document.getElementById('t') 
 
var $FT = document.getElementById("FT") 
 
var $FTText = document.getElementById("FTText") 
 

 
function HideControls (tof) { 
 
    $t.style.display = $FT.style.display = $FTText.style.display = (tof ? 'none' : '') 
 
}

<button onclick="HideControls(false)">Show Controls</button> 
 
<button onclick="HideControls(true)">Hide Controls</button> 
 
<hr> 
 

 

 
<span id="t"><button id="ctr">Centre Map</button></span><span id="t2"><form name="Follow"><input type="checkbox" id ="FT" name="FT" onclick = "TitanicCheckBox(this)"><span id="FTText">Follow</span></form> 
 
</span>