0

Nesse código o Onclick só funciona após o segundo click

<!DOCTYPE html>
<html>
  <head>
    <title>teste</title>
	<style type="text/css">
	  div{
	    height: 100px;
		width: 100px;
		border: 5px solid blue;
		opacity: 0;
      }
	</style>
  </head>
  <body>
    <script type="text/javascript">
	  function vai(){
	    if (document.getElementById("div").style.opacity=="0") {
		  document.getElementById("div").style.opacity="1"
		}
		else {
		  document.getElementById("div").style.opacity="0"
		}
      }
	</script>
    <p onClick="vai()">aparece</p>
    <div id="div">123</div>
  </body>
</html>

2
  • document.getElementById("div").style.opacity="1" ? document.getElementById("div").style.opacity="1" : document.getElementById("div").style.opacity="0" acho que isso resolve, troca as condições if e else por isto
    – user76271
    Commented 22/08/2017 às 21:25
  • Assim não funcionou Commented 22/08/2017 às 21:43

3 Respostas 3

1

É o seguite... quando voce fala:

document.getElementById("div").style.opacity=="0")

na realidade, document.getElementById("div").style.opacity não esta definido. Ou seja tem valor de "" (empty string). Acho que da jogo se voce trocar o "0" por "". Ficaria assim:

document.getElementById("div").style.opacity == "")

Mas na realidade voce não quer perder a possibilidade do toggle então inclui isso o código novo com um OR no mesmo if statement

document.getElementById("div").style.opacity=="0" || document.getElementById("div").style.opacity==""  

function vai(){
if (document.getElementById("div").style.opacity=="0" || document.getElementById("div").style.opacity=="") 
{
    document.getElementById("div").style.opacity="1"
}
else   
{ 
    document.getElementById("div").style.opacity="0"
}
}
div{
	    height: 100px;
		width: 100px;
		border: 5px solid blue;
		opacity: 0;
      }
<p onClick="vai()">aparece</p>
<div id="div">123</div>

4
  • Como assim? Fiz alteração e não foi Commented 22/08/2017 às 21:44
  • Vou fazer um fiddle rapidinho...
    – idp
    Commented 22/08/2017 às 21:45
  • ta la 👆🏾, faz sentido?
    – idp
    Commented 22/08/2017 às 21:48
  • Entedi..mas é complicado...tem alguma outra forma mais fácil de fazer esse efeito? Commented 22/08/2017 às 21:58
0

Quando você tenta verificar com um if se document.getElementById("div").style.opacity e igual a 0 vai retornar undefined porque não vai ter nada no inicio para resolver isso você so precisa verificar se document.getElementById("div").style.opacitye igUAL a "" ou seja vazio.

Então troque a parte de seu código:

if (document.getElementById("div").style.opacity=="0") {

por

if (document.getElementById("div").style.opacity=="0" || document.getElementById("div").style.opacity=="") {

<!DOCTYPE html>
<html>
  <head>
    <title>teste</title>
	<style type="text/css">
	  div{
	    height: 100px;
		  width: 100px;
		  border: 5px solid blue;
		  opacity: 0; 
    }
	</style>
  </head>
  <body>
  <script type="text/javascript">
	  function vai(){
	    if (document.getElementById("div").style.opacity=="0" || document.getElementById("div").style.opacity=="") {
		    document.getElementById("div").style.opacity = 1;
		  }
		  else {
		    document.getElementById("div").style.opacity = 0;
		  }
    }
	</script>
    <p onClick="vai()">aparece</p>
    <div id="div">123</div>
  </body>
</html>

3
  • E então porque ele aceitava após o segundo click? Commented 22/08/2017 às 22:18
  • 2
    Ele aceitava após o segundo click porque quando executa o código e tenta verificar com if (document.getElementById("div").style.opacity=="0") {ele vai retornar undefined e vai executar o código do else setando o valor 1 em document.getElementById("div").style.opacity
    – Enio
    Commented 22/08/2017 às 22:21
  • ah sim...Entedi.. Commented 22/08/2017 às 22:37
0

Você pode usar getComputedStyle() para pegar os valores CSS de um elemento:

function vai() {
	var elemento = document.getElementById('div');
	estilo = window.getComputedStyle(elemento);
	opacity = estilo.getPropertyValue('opacity');

	if (opacity=="0") {
	document.getElementById("div").style.opacity="1"
	}
	else {
	document.getElementById("div").style.opacity="0"
	}
}
div{
	    height: 100px;
		width: 100px;
		border: 5px solid blue;
		opacity: 0;
      }
<p onClick="vai()">aparece</p>
    <div id="div">123</div>

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 .