Java Script does not change a div with display from "None" to "block"

Question

I would like some help on element style.display in java script. JS is not changing a div declared in None jsp to block. I have a jsp page that has a div of the hidden type:

<input type="radio" id="ContaForm" name="nuTipoContaR"  value="1" checked/>&nbsp;Conta raíz&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="radio" id="ContaForm" name="nuTipoContaE" value="2"/>&nbsp;Estrangeira&nbsp;&nbsp;&nbsp;&nbsp;
                <br>
        </div>
    <div id="divInstituicao" style="display:none;">

                    <div id="divInstituicaoEstrangeira" style="display:none;">  
                        <div class="divlinha">
                            <div class="linhaLabel"> Instituição:</div>
                            <div class="divlinhaLabelTexto">
                                <html:text property="instituicaoEstrangeira" styleId="instituicaoEstrangeira" value="" onkeypress='return trataEnterAspas( event );' onblur="trataCaracteres( this );" onkeyup="trataCaracteres( this );" maxlength="60" size="78" /> <br />
                            </div>  
                        </div>
                    </div>  
         </div>

In javascript my intention is to check if the div is None and if the radiobutton is clicked , display this div. But not going, he even recognizes that the div is None , but in Document.Elementbyid("institution").style.display="block" the system does not display the div on the jsp screen. Please help me, I’m a beginner and I’ve done some research, but without success.

$('#form input:radio').bind("click", function() {

        if ($(this).is(':checked')) {
            var tipoTce = $("input[@name='ContaForm']:checked").value;
            tipoConta = parseInt($(this).val());

            if(tipoConta == "2"){
                    var deConta = $("#deContaEstrangeira").val();
                    var nuContaEstranegira = $("#nuContaEstrangeira").val();
                    var noContaEstrangeira = $("#noContaEstrangeira").val();

                    document.getElementById("descMotivo").innerHTML = deMotConta;
                    document.getElementById("noTipoConta1").value = noContaEstrangeira;
                    document.getElementById("deTipoConta1").value = deMotConta;
                    document.getElementById("nuTipoConta1").value = nuContaEstrangeira;
                    if(document.getElementById("divInstituicao").style.display == "none"){
                    document.getElementById("divInstituicao").style.display = "block";
                    }
                }

            else if(tipoConta =="1"){
                    retornaTipoContaRaiz();
            }
    }});

Answer 1

In HTML you have divInstituicao and your daughter div divInstituicaoEstrangeira both with display: none;

In Javascript you have only document.getElementById("divInstituicao"). You must activate both:

document.getElementById("divInstituicao").style.display = "block";                  
document.getElementById("divInstituicaoEstrangeira").style.display = "block";

Answer 2

Are you changing the display only from 1 div which contains another which is also hidden.

The solution is to remove the style="display:none;" of the internal div divInstituicaoEstrangeira change only the display of div-mother divInstituicao:

if(document.getElementById("divInstituicao").style.display == "none"){
 document.getElementById("divInstituicao").style.display = "block";
}

However, as I see that you use jQuery, I suggest applying the same in your code, getting like this:

if($("#divInstituicao").not(":visible")){
    $("#divInstituicao").show();
}

It doesn’t make much sense to upload a jQuery library to your page and use it partially, mixing with pure JS, whose codes are more large and more susceptible to errors.