JackParker2 JackParker2 - 26 days ago 10
HTML Question

Why Doesn't Style.Display = None Work To Make My Button Invisible?

I wrote a simple function that calls onClick. When one button is selected it is supposed to make the next set of buttons visible of invisible based on that particular choice. I have tried multiple ways to get it to work and none of them seem to get the button to become invisible after the function runs.

Here is what I have so far...

function hiddenMess(){

if (document.getElementById('Selection8').checked) {
document.all('customChoice1').style.visibility = 'hidden';
document.getElementById('customChoice1').style.visibility = 'hidden';
document.getElementById('customChoice1').style.display = 'none';
}


I used all 3 of these in the hopes one of them would work, and then I could eliminate the other two.

The button it is called from is setup like this

<div class="radio">
<label><input type="radio" id='Selection8' name="SelectionVal" value="222" OnClick="hiddenMess()">Test Button 8</label>
</div>
}


This is the button I am trying to make hidden.

<input type="radio" id="customChoice1" name="customDChoice" value="Hello" > Hello"<br>

Answer

Your code is successfully hiding the radio button itself but not the label. Here we target the label, which wraps the radio, instead:

function hiddenMess(){

  if (document.getElementById('Selection8').checked) {  
      document.getElementById('customChoice1').style.display = 'none';
  }
}
<div class="radio">
                 <label><input type="radio" id='Selection8' name="SelectionVal" value="222"  OnClick="hiddenMess()">Test Button 8</label>
             </div>
<br>
<hr>
<br>

   <label id="customChoice1"><input type="radio" name="customDChoice" value="Hello">Hello</label>

Comments