How to toggle text between "show / hide" inside a javascript button

Asked

Viewed 4,422 times

9

I don’t know anything about Javascript. So even though it’s something "simple" for some people, it’s a seven-headed animal. Here’s the thing:

In the following code is a script that I will use that hides and shows the div by clicking on button, only in this script right there I click a thousand times on button the value within it does not change!

function Mudarestado(el) {
    var display = document.getElementById(el).style.display;

    if(display == "none")
        document.getElementById(el).style.display = 'block';
    else
        document.getElementById(el).style.display = 'none';
}
<div id="minhaDiv">Conteudo</div>

<button type="button" onclick="Mudarestado('minhaDiv')">Mostrar / Esconder</button>

So here’s what I wanted to do! I wish that when the div the text shown in button were "show", and when the div were the show I’d like you to show "hide".

Still improving the script, I wish it had an effect fade.

If possible I would like this to be done in pure javascript, because I do not use Jquery in my project, so I find it inconvenient to put a 100kb file just because of something relatively "simple"

javascript
  • 1

    You asked two questions in one... I answered the main question, but add an effect fade in pure JS is sufficiently dissociated to deserve a separate question. At this link there is an interesting but limited technique (it does not put display:none at the end). Looking for the subject, there are other possibilities, but it is nevertheless a task of reasonable complexity... (first animates opacity and only at the end hides - can not animate "visibility")

3 answers

7


All you need to do is select the button (give it a id to make it easier) and change its value (innerHTML) during the code of onclick:

function Mudarestado(el) {
    var display = document.getElementById(el).style.display;
    var botao = document.getElementById("meuBotao");

    if(display == "none") {
        document.getElementById(el).style.display = 'block';
        botao.innerHTML = "Esconder";
    }
    else {
        document.getElementById(el).style.display = 'none';
        botao.innerHTML = "Mostrar";
    }
}
<div id="minhaDiv">Conteudo</div>

<button id="meuBotao" type="button" onclick="Mudarestado('minhaDiv')">Esconder</button>

  • Good afternoon, I would like to know how to change the value of onClick by clicking the button.

  • 1

    @Iwannaknow This solves? botao.onclick = function(e) { ... };

  • I took a test now with setAttribute and it worked. Thanks for the indication.

3

Just use innerHTML to read/define your text <button>.

$div = document.querySelector('.minha-div');
$button = document.querySelector('.handle-div');

$button.onclick = function(){
    this.innerHTML = this.innerHTML == 'Esconder' ? 'Mostrar' : 'Esconder';
    /*
      ou...
      var inner = this.innerHTML;
      if(inner == 'Esconder')
          inner = 'Mostrar';
      else
          inner = 'Esconder';
      this.innerHTML = inner;
    */
    mudarEstado();
}


function mudarEstado() {
    var display = $div.style.display;
    if(display == "none")
        $div.style.display = 'block';
    else
        $div.style.display = 'none';
}
<div class="minha-div">Conteudo</div>
<button class='handle-div' type="button">Esconder</button>

1

You could do as follows using the tennis operator and passing the button reference by parameter with this to be able to change the text of the text.

function Mudarestado(el, btn) {
    
    var ele = document.getElementById(el);
    var display = ele.style.display;
    
    ele.style.display = display == 'none' ? 'block' : 'none';
    btn.innerHTML = display == 'none' ? 'Esconder' : 'Mostrar';

}
<div id="minhaDiv">Conteudo</div>

<button type="button" onclick="Mudarestado('minhaDiv', this)">Esconder</button>

Browser other questions tagged javascript

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