Função em Javascript só funciona a partir do segundo clique

ClovisBlock · Abril 5, 2019

Preciso de um help dos amigos para entender o que tem de errado no código.

Trata-se de uma função básica para exibir/ocultar uma div, alterando a propriedade display do CSS. Acontece que no primeiro clique já era para exibir a div, mas a exibição só acontece no segundo clique e a partir daí funciona normalmente, ou seja, exibe e oculta a cada clique.

Meu código faz uma verificação inicial do valor de display (inicializado como none no CSS) e, caso seja igual a none, muda para flex, só que essa verificação e consequente troca dos valores do display só acontece a partir do segundo clique.

UPDATE: amigo sugeriu colocar inline o estilo que exibe/oculta a div, fiz e resolveu, mas acontece que isso é uma gambiarra e gostaria de saber o que realmente está acontecendo.

Segue o código abaixo ou se quiserem ver no Codepen o link está abaixo.

https://codepen.io/clovis-alberto-block/project/editor/ZBLgmK

Valeu pela ajuda!

<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
h1 {
display:block;
margin:10px;
}
h1:hover {
cursor:pointer;
color:lime;
} 
.modal{
position: relative;
height: 100px;
width: 100em;
background: red;
}
#exibeModal{
    display:none;
}
    </style>
    <div id="container">
        <h1 class="one" id='um' onclick="someFunction('one',this)">Clique 01</h1>
        <h1 class="two" id='dois' onclick="exibeModal('exibeModal',this)">Clique 02</h1>
        <h1 class="three" id='tres' onclick="exibeModal('exibeModal',this)">Clique 03</h1>
        <h1 class="four" id='quatro' onclick="someFunction('four',this)">Clique 04</h1>
    </div>
    <div class="modal" id="exibeModal">
    </div>
<!-- ------------------------------------------------------------------------------- -->
    <script type="text/javascript">
    function someFunction(abc,obj) {
        console.log(obj.id);        
    }

    function exibeModal(abc,obj){
        var exibir = document.getElementById(abc);
        if (exibir.style.display == 'none') {
            exibir.style.display = 'block';  
            console.log(obj.id); 
        } else {
            exibir.style.display = 'none';
            console.log(obj.id);
        }        
    }
    </script>
</body>
</html>

Leonardo Persan · Abril 10, 2019

Tecnicamente não sei explicar, mas o "lugar" onde o display configurado no CSS é armazenado é diferente do que o Javascript acessa para exibir o *.style.css, então o display in-line não é uma gambiarra é necessário da forma que está fazendo.

Mas eu indico que você faça usando o toggle do jQuery, é mais simples.

ClovisBlock · Abril 14, 2019

Em 10/04/2019 em 16:18, Leonardo Persan disse:

Tecnicamente não sei explicar, mas o "lugar" onde o display configurado no CSS é armazenado é diferente do que o Javascript acessa para exibir o *.style.css, então o display in-line não é uma gambiarra é necessário da forma que está fazendo.

Mas eu indico que você faça usando o toggle do jQuery, é mais simples.

Leonardo, obrigado pela resposta e desculpa pela demora, dei um tempo para os estudos por motivo de trabalho. Pretendo estudar o jQquery mais tarde e por enquanto vou manter a gambiarra.

Entrar

Função em Javascript só funciona a partir do segundo clique

Pergunta

ClovisBlock

Link para o comentário

Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

Leonardo Persan

Link para o comentário

Compartilhar em outros sites

ClovisBlock

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades