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

0

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

<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 radio button is clicked, display this div. But it is not going, it even recognizes that the div is none, but in the document.ElementById ("institution"). Style.display="block" The system does not display the div on the jsp screen. Help me please, 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();
            }
    }});
    
asked by anonymous 28.08.2017 / 18:46

2 answers

0

You are changing the display of only 1 div that contains another that is also hidden.

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

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

However, as I see you use jQuery, I suggest to apply the same in your code, so:

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

It does not make much sense to load a jQuery library on your page   and use it partially, mixing with pure JS, whose codes are more   extensive and more susceptible to errors.

    
28.08.2017 / 19:04
0

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

In JavaScript you only have document.getElementById("divInstituicao") . You need to enable both:

document.getElementById("divInstituicao").style.display = "block";                  
document.getElementById("divInstituicaoEstrangeira").style.display = "block";
    
28.08.2017 / 18:57