Onclick works only on the second click

Question

Onclick works only on the second click

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

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-eventos

asked by anonymous 22.08.2017 / 23:17

3 answers

0

It's the following ... when you speak:

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

Actually, document.getElementById ("div"). style.opacity is not defined. In other words, it has a value of "" (empty string). I think of the game if you change the "0" by "". It would look like this:

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

But in reality you do not want to miss 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>

22.08.2017 / 23:27

0

You can use getComputedStyle() to get 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>

23.08.2017 / 00:11

I want to get the keyup done on a contenteditable div Error object is not subscriptable

score 0 · Accepted Answer

When you try to check with if if document.getElementById("div").style.opacity and equal 0 will return undefined because it will not have anything in the beginning to solve this you just need to check if document.getElementById("div").style.opacity and igUAL a "" or empty.

Then change the part of your code:

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

by

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>