How to make a simple show/hide button work?

user_13575946 0
Viewed 76

I'm just trying to find out... why do I have to click 2x (instead of just 1 click) until the text appears for the first time? Could you give me some help to fix that? Thanks!

function mudar() {
  var x = document.getElementById("texto");
  if (x.style.display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
.escondido {
  display: none;
}
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

display button html javascript
5 Answers

you can change

        if (x.style.display == "none") {

to 

        if (x.style.display === "" || x.style.display == "none") {
user_38088260

When your program starts, the value of x.style.display is not "none", it is the empty string.

Just add:

|| x.style.display == ""

And that should work as expected.

function mudar() {
  var x = document.getElementById("texto");
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
.escondido {
  display: none;
}
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

user_35487730

It is because initially the display property in style is an empty string "". And your code is following through to else block directly. You can add a condition to check if the display property value is an empty string.

function mudar() {
  var x = document.getElementById("texto");
  console.log(x.style.display)
  if (x.style.display == "none" || x.style.display == "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
.escondido {
  display: none;
}
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

user_40084540

To get the display property use getComputedStyle() which "returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain"

function mudar() {
  var x = document.getElementById("texto");
  var display = window.getComputedStyle(x).getPropertyValue('display');
  if (display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
.escondido {
  display: none;
}
<button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
<p class="escondido" id="texto">Texto para exibir e esconder</p>

user_6164430

Here's an alternative method, toggling the class, decoupling your styles from your "business logic":

<html>

<head>
  <style>
    .escondido {
      display: block;
    }
    
    .escondido-hidden {
      display: none;
    }
  </style>
</head>

<body>
  <button onclick=mudar()>EXIBIR E ESCONDER O TEXTO</button>
  <p class="escondido escondido-hidden" id="texto">Texto para exibir e esconder</p>
  <script>
    function mudar() {
      var x = document.getElementById("texto");
      x.classList.toggle('escondido-hidden')
    }
  </script>
</body>

</html>

user_17088680
Related