Home > Software design >  Show/hide division based on the checked radio button:
Show/hide division based on the checked radio button:

Time：11-17

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>

CodePudding user response：

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

the "correct" way to do that

  1. use a form
  2. if you are using a form you can access each of the entries in your form by name, and you don't need to assign them id: this is even more useful for radio types, because you can directly use their selected value
  3. use CSS class inheritance and other possibilities, like the neighborhood here

const 
  myForm    = document.forms['my-form']
, d_account = myForm.querySelector('div.account')
, d_ifc     =  myForm.querySelector('div#ifc')
, d_ifo     =  myForm.querySelector('div#ifo')
  ;
myForm.oninput =_=>
  {
  d_account.className = 'account'   myForm.Account.value
  d_ifc.className     =  myForm.ifc_currency.value
  d_ifo.className     =  myForm.ifo_currency.value
  }
function isInputNumber(evt)
  {
  let ch = String.fromCharCode(evt.which);
  if (!(/[0-9]/.test(ch)))  evt.preventDefault();
  }
div.account ~ div#ifc, 
div.account ~ div#ifo         { display: none; }
div.account.ccheck ~ div#ifc,
div.account.ocheck ~ div#ifo  { display: block; }

div#ifc > div#ifEURO,
div#ifc > div#ifGBP        { display: none; }
div#ifc.EUR > div#ifEURO,
div#ifc.GBP > div#ifGBP    { display: block; }

div#ifo > div#ifEUROOP,
div#ifo > div#ifGBPOP      { display: none; }
div#ifo.EUR > div#ifEUROOP,
div#ifo.GBP > div#ifGBPOP  { display: block; }
<form name="my-form">
  <label class="Account">Account:</label>
  <div class="account">
    <label> C-61 <input type="radio" name="Account" value=" ccheck" > </label> &nbsp;&nbsp;
    <label> O-51 <input type="radio" name="Account" value=" ocheck" > </label> &nbsp;&nbsp;
    <label> Both <input type="radio" name="Account" value=" ccheck ocheck"> </label>
  </div>
  <div id="ifc">
      <br><br>
    <label class="Appcap"> Approved C in Local Currency and USD:</label>
    <br><br>
    <label class="LC"> C Amount in Local Currency:</label>
      <br>
    <label>EUR <input type="radio" name="ifc_currency" value="EUR"> </label>  &nbsp;&nbsp;
    <label>GBP <input type="radio" name="ifc_currency" value="GBP"> </label> <br>

    <div id="ifEURO">
      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">
      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>

  <div id="ifo">
      <br><br>
    <label class="Appop"> Approved O in Local Currency and USD:</label>
      <br><br>
    <label class="LCO"> O Amount in Local Currency:</label>
      <br>
    <label>EUR <input type="radio"  name="ifo_currency" value="EUR"> </label> &nbsp;&nbsp;
    <label>GBP <input type="radio"  name="ifo_currency" value="GBP"> </label> <br>

    <div id="ifEUROOP">
      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">
      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>
</form>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Softwaredesign/194152.html

Prev:How to search some text in an array and get the index of the searched array in javascript
Next:JSON.parse a string with an escape
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding