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>