Jump to content
Fórum Script Brasil
  • 0

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


Question

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>

 

 

Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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.

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148692
    • Total Posts
      644525
×
×
  • Create New...