Ir para conteúdo
Fórum Script Brasil

ClovisBlock

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    4

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por ClovisBlock

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

    em Ajax, JavaScript, XML, DOM

    Postado

    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.

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

    em Ajax, JavaScript, XML, DOM

    Postado

    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>

     

     

×
×
  • Criar Novo...