html controls not being shown/hidden when toggled

Question

I'm trying to enable some html controls from being shown depending on when a time condition is true.

My controls are as follows:

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

And my toggle control is as follows:

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

The function is being called and the correct "if" condition is entered ( HideControls( false );), but the controls aren't being toggled. What have I done wrong?

Answer 1

In display property, value all doesn't exist. You should use block or initial .

Reference: https://www.w3schools.com/cssref/pr_class_display.asp

Answer 2

A few pointers that will allow you to immensely shorten your HideControls method:

• Cache your DOM elements in variables outside your function. This means you don't have to use getElementById every time the function is called.

• Use .style.display = 'none' and .style.display = '' to hide and show the controls, respectively.

• Use the ternary operator instead of an if-else statement; in this case it is much terser to set every variable to (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> 

Answer 3

Question wasn't really clear, is this what you're trying to achieve?

 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>