0

Gostaria de uma ajuda sobre o element style.display no java script. O JS não esta alterando uma div declarada na jsp de none, para block. Tenho uma página jsp que tem uma div do tipo escondida:

<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>

No javascript minha intenção é verificar se a div é none e se o radiobutton for clicado , exibir essa div. Mas não esta indo, ele até reconhece que a div é none , mas no document.ElementById("instituicao").style.display="block" o sistema não exibe a div na tela do jsp. ME ajudem por favor, sou iniciante e já fiz algumas pesquisas, mas sem sucesso.

$('#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();
            }
    }});
2
  • 1
    No HTML tens divInstituicaoEstrangeira no JavaScript tens document.getElementById("divInstituicao"). São nomes diferentes... ou seja o conteúdo está com display: none; também.
    – Sergio
    28/08/2017 às 16:47
  • Obrigada Sérgio, vou alterar aqui 28/08/2017 às 16:52

2 Respostas 2

0

Você está alterando o display apenas de 1 div que contém outra que também está oculta.

A solução é retirar o style="display:none;" da div interna divInstituicaoEstrangeira alterar apenas o display da div-mãe divInstituicao:

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

No entanto, como vejo que vc usa jQuery, sugiro aplicar o mesmo em seu código, ficando assim:

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

Não faz muito sentido vc carregar uma biblioteca jQuery na sua página e usá-la parcialmente, misturando com JS puro, cujos códigos são mais extensos e mais suscetíveis a erros.

1
  • Muito obrigada pelo alerta! Esta funcionando conforme gostaria. Esse js, está uma mistura só. Na verdade eu estou adicionando algumas verificações, pois esse arquivo já existia na minha empresa. Eu fico assim, sem saber qual notação eu uso nessa situação. 28/08/2017 às 17:59
0

No HTML tens divInstituicao e sua div filha divInstituicaoEstrangeira ambas com display: none;

No JavaScript tens somente document.getElementById("divInstituicao"). Tens de ativar ambas:

document.getElementById("divInstituicao").style.display = "block";                  
document.getElementById("divInstituicaoEstrangeira").style.display = "block";
3
  • Obrigada, vou alterar 28/08/2017 às 17:01
  • Muito obrigada, eseta funcionando conforme eu gostaria, e esta exibindo o campo em tela agora. =D 28/08/2017 às 18:00
  • @Priscila.pcs ótimo. Dei resposta também apesar de ter comentado na pergunta. Já agora, se tens JS nativo misturado com jQuery é melhor ir tirando o jQuery. jQuery está a desaparecer porque é uma tecnologia antiga. JavaScript vai sempre ficar igual.
    – Sergio
    28/08/2017 às 18:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .