Show/hide division based on the checked radio button:

Question

I am trying to show/hide the divisions based on the checked radio button. Although it works in the currencies functions when, I am trying in the account one it does not. Any help/suggestions would be appreciated as I am stuck for quite awhile. Below is my code:

Account:

    <script type="text/javascript">

        function account() {
           if (document.getElementByID('ccheck').checked) {
                document.getElementByID('ifc').style.display = 'block';
            }
            else document.getElementByID('ifc').style.display = 'none';
            if (document.getElementByID('ocheck').checked) {
                document.getElementByID('ifo').style.display = 'block';
            }
            else document.getElementByID('ifo').style.display = 'none';
            if (documen.getElementByID('bothcheck').checked) 
            {document.getElementsByID('ifc','ifo').style.display='block';
        } 
            else document.getElementsByID('ifo','ifc').style.display= 'none'}
        

        </script> 

C-61<input type="radio" name="Account" id="ccheck" onclick="javascript:account();">
O-51<input type="radio" name="Account" id="ocheck" onclick="javascript:account();">
Both <input type="radio" name="Account" id="bothcheck" onclick="javascript:account();">

</div>
<br><br>
<div id="ifc" style="display:none">
<label class="Appcap"> Approved C in Local Currency and USD:</label>
<br><br>
<label class="LC"> C Amount in Local Currency:</label>
<br>
<script type="text/javascript">

    function currencies() {
        if (document.getElementById('EUROCheck').checked) {
            document.getElementById('ifEURO').style.display = 'block';
        }
        else document.getElementById('ifEURO').style.display = 'none';
        if (document.getElementById('GBPCheck').checked) {
            document.getElementById('ifGBP').style.display = 'block';
        }
        else document.getElementById('ifGBP').style.display = 'none';
    }
    </script>

EUR <input type="radio" onclick="javascript:currencies();" name="currency" id="EUROCheck">
<br>
GBP <input type="radio" onclick="javascript:currencies();" name="currency" id="GBPCheck"><br>
    <div id="ifEURO" style="display:none">
        EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EURO' name='EURO'onkeypress="isInputNumber(event)"><br>
    </div>
    <div id="ifGBP" style="display:none">
        GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBP' name='GBP' onkeypress="isInputNumber(event)"><br>
    </div>
    <br>
 <label for="Amount in USD"> Amount in USD:</label>
    <br>
   USD <input type="number" min=0.00 max=0.00 step="0.01" id="USD" onkeypress="isInputNumber(event)">
</div>
<br><br>

<div id="ifo" style="display: none">

<label class="Appop"> Approved O in Local Currency and USD:</label>
<br><br>
<label class="LCO"> O Amount in Local Currency:</label>
<br>
<script type="text/javascript">


    function currenciesop() {
        if (document.getElementById('EUROCheckOP').checked) {
            document.getElementById('ifEUROOP').style.display = 'block';
        }
        else document.getElementById('ifEUROOP').style.display = 'none';
        if (document.getElementById('GBPCheckOP').checked) {
            document.getElementById('ifGBPOP').style.display = 'block';
        }
        else document.getElementById('ifGBPOP').style.display = 'none';
    }
    </script>

function isInputNumber(evt){ var ch = String.fromCharCode(evt.which); if(!(/[0-9]/.test(ch))){ evt.preventDefault(); } }

    EUR <input type="radio" onclick="javascript:currenciesop();" name="currency" id="EUROCheckOP">
    <br>
    GBP <input type="radio" onclick="javascript:currenciesop();" name="currency" id="GBPCheckOP"><br>
        <div id="ifEUROOP" style="display:none">
            EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EUROOP' name='EURO'onkeypress="isInputNumber(event)"><br>
        </div>
        <div id="ifGBPOP" style="display:none">
            GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBPOP' name='GBP' onkeypress="isInputNumber(event)"><br>
        </div>
        <br>
     <label for="Amount in USD OP"> Amount in USD:</label>
        <br>
       USD <input type="number" min=0.00 max=0.00 step="0.01" id="USDOP" onkeypress="isInputNumber(event)">
    </div> 

Answer 1

As mentioned in the comments, capitalization matters. Also, there is not a getElementsById() method in JS. You need to call each element one at a time.

You can use a querySelectorAll() to get multiple elements, and then use .forEach() to iterate over each element. The only caveat is that you need to make sure that you are using CSS selectors. For example:

document.querySelectorAll('#ifc','#ifo').forEach( el => el.style.display='block');

The main reason that nothing shows, is that you need to drop the else on the bothcheck because if you check one of the other two radio buttons, well bothcheck is not checked and will hide both of the div elements.

It is also a good practice to have the labels for each radio inside a <label> element.

working snippet below:

function account() {

  if (document.getElementById('ccheck').checked) {
    document.getElementById('ifc').style.display = 'block';
  } else document.getElementById('ifc').style.display = 'none';
  if (document.getElementById('ocheck').checked) {
    document.getElementById('ifo').style.display = 'block';
  } else document.getElementById('ifo').style.display = 'none';
  if (document.getElementById('bothcheck').checked) {
    document.getElementById('ifc').style.display = 'block';
    document.getElementById('ifo').style.display = 'block';
  }
}


function currencies() {
  if (document.getElementById('EUROCheck').checked)
    document.getElementById('ifEURO').style.display = 'block';
  else document.getElementById('ifEURO').style.display = 'none';

  if (document.getElementById('GBPCheck').checked)
    document.getElementById('ifGBP').style.display = 'block';
  else document.getElementById('ifGBP').style.display = 'none';
}


function currenciesop() {
  if (document.getElementById('EUROCheckOP').checked)
    document.getElementById('ifEUROOP').style.display = 'block';
  else document.getElementById('ifEUROOP').style.display = 'none';

  if (document.getElementById('GBPCheckOP').checked)
    document.getElementById('ifGBPOP').style.display = 'block';
  else document.getElementById('ifGBPOP').style.display = 'none';
}


function isInputNumber(evt) {
  var ch = String.fromCharCode(evt.which);
  if (!(/[0-9]/.test(ch))) {
    evt.preventDefault();
  }

}

<label class="Account">Account:</label>
<div class=account>
  <label for=ccheck>C-61</label>
  <input type="radio" name="Account" id="ccheck" onclick="account()">
  <label for=ocheck>O-51</label>
  <input type="radio" name="Account" id="ocheck" onclick="account()">
  <label for=bothcheck>Both</label>
  <input type="radio" name="Account" id="bothcheck" onclick="account()">
</div>
<br><br>

<div id="ifc" style="display:none">
  <label class="Appcap"> Approved C in Local Currency and USD:</label>
  <br><br>
  <label class="LC"> C Amount in Local Currency:</label>
  <br> EUR <input type="radio" onclick="javascript:currencies();" name="currency" id="EUROCheck">
  <br> GBP <input type="radio" onclick="javascript:currencies();" name="currency" id="GBPCheck"><br>
  <div id="ifEURO" style="display:none">
    EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EURO' name='EURO' onkeypress="isInputNumber(event)"><br>
  </div>
  <div id="ifGBP" style="display:none">
    GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBP' name='GBP' onkeypress="isInputNumber(event)"><br>
  </div>
  <br>
  <label for="Amount in USD"> Amount in USD:</label>
  <br> USD <input type="number" min=0.00 max=0.00 step="0.01" id="USD" onkeypress="isInputNumber(event)">
</div>
<br><br>

<div id="ifo" style="display: none">

  <label class="Appop"> Approved O in Local Currency and USD:</label>
  <br><br>
  <label class="LCO"> O Amount in Local Currency:</label>
  <br> EUR <input type="radio" onclick="javascript:currenciesop();" name="currency" id="EUROCheckOP">
  <br> GBP <input type="radio" onclick="javascript:currenciesop();" name="currency" id="GBPCheckOP"><br>
  <div id="ifEUROOP" style="display:none">
    EUR <input type='number' min=0.00 max=999999999.00 step=0.01 id='EUROOP' name='EURO' onkeypress="isInputNumber(event)"><br>
  </div>
  <div id="ifGBPOP" style="display:none">
    GBP <input type='number' min=0.00 max=999999999.00 step=0.01 id='GBPOP' name='GBP' onkeypress="isInputNumber(event)"><br>
  </div>
  <br>
  <label for="Amount in USD OP"> Amount in USD:</label>
  <br> USD <input type="number" min=0.00 max=0.00 step="0.01" id="USDOP" onkeypress="isInputNumber(event)">
</div>