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

Question

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

Navigation

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

8

I do not know anything about Javascript . So even being something "simple" to some to me is a seven-headed animal. It is as follows:

In the following code there is a script that I will use that hides and shows the div by clicking on the button , except that in this script even though I click a thousand times on button the value inside it does not change! / p>

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>

Here's what I wanted to do! I would like that when div was hidden the text shown in button was "show" , and when div was the show I would like it to hide >.

While improving the script, I wish it had a fade effect.

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

asked by anonymous 05.01.2015 / 07:19

3 answers

3

Just use innerHTML to read / set the text of your <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>

05.01.2015 / 08:11

1

You could do the following using the bracket operator and passing the button reference per parameter with this in order to change the text of the button.

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>

13.11.2015 / 18:13

Check user's browser in PHP Discover the position of the Scroll of a certain object

score 7 · Accepted Answer

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

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>