Onclick works only in the second click

Asked

Viewed 823 times

0

In this code Onclick only works after the second 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>

javascript-events

  • document.getElementById("div").style.opacity="1" ? document.getElementById("div").style.opacity="1" : document.getElementById("div").style.opacity="0" I think that solves, changes the conditions if e else for this reason

  • That didn’t work

3 answers

0

It’s the seguite... when you speak:

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

in reality, Document.getElementById("div").style.opacity is not defined. That is, it has value of "" (Empty string). I think the game if I change the "0" for "". I would be like this:

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

But in reality Voce does not want to lose the possibility of toggle so include that new code with an OR in the same 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>

  • What do you mean? I made a change and it wasn’t

  • I’ll make a fiddle real quick...

  • ta la , makes sense?

  • Entedi.. but it’s complicated...there’s some other easier way to make that effect?

0


When you try to check with a if if document.getElementById("div").style.opacity and equal to 0 will return undefined because there won’t be anything in the beginning to solve this you just need to check if document.getElementById("div").style.opacityand equal to "" or empty.

Then change the part of your code:

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

for

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>

  • And then because he accepted after the second click?

  • 2

    It accepted after the second click because when it executes the code and tries to check with if (document.getElementById("div").style.opacity=="0") {it will return Undefined and will execute the code of the else setting the value 1 in document.getElementById("div").style.opacity

  • ah yes... Entedi..

0

You can use getComputedStyle() to take the CSS values of an element:

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>

Browser other questions tagged javascript-events

You are not signed in. Login or sign up in order to post.