-1

Utilizei o código vindo de outra pergunta do site para que conseguisse esconder/mostrar um texto ao clicar em um botão, mas gostaria de saber se existe alguma forma de já ter o texto ocultado ao iniciar o programa e, quando pressionar o botão, o texto ser exibido.

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

  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">
  <h1>Conteudo</h1>
</div>
<button id="btn" type="button" onclick="Mudarestado('minhaDiv')"><h1>Esconder</h1></button>

2

2 Respostas 2

0

Bom, aparentemente você não entendeu a base do DOM, então pra esclarecer...

Basicamente, o javascript dentro de uma página HTML, tem a liberdade de modificar elementos CSS, dentro de objetos HTML, como por exemplo a borda de uma ou um tamanho máximo de um

.

Quando você chama um elemento HTML dentro de um script (usando querySelector() por exemplo), você "puxa" as informações do HTML em formato de objeto, que têm suas devidas propriedades.

Até aí, você tem suas noções básicas de interação script-web, ok?

Ao carregar, uma página vai ser exibida com as definições CSS que você estabelecer, então para começar invisível, deve estabelecer no objeto que o display: none.

Seguindo isso, sugiro que dê uma estudada em Objetos JS, e nas noções básicas da linguagem, em algum site como a W3School.

À frente, o importante de se pensar é:

Com document.getElementById(), você está acessando ao DOCUMENTO da página (document), e logo em seguida pedindo que procure e te retorne o elemento com determinado ID, através do método getElementById()

Como funciona a mudança dos elementos através do javascript então?

Você pode visualizar esse processo como uma ÁRVORE.

Seu tronco é o document, e o primeiro galho é o de getElementById(), que acessa agora seu elemento com id citado.

Agora você quer acessar a característica DISPLAY desse elemento, que nesse exemplo será none ou block. A característica é acessível dentro do requisito style, do CSS.

Então seguimos no galho style, e então na característica desejada, o display.

O código então seria: document.getElementById('el').style.display;

Com uma condicional simples você pode dizer que esse elemento recebe a característica none (não aparece) ou block (aparece), chamando uma função através do seu botão:

<button onclick='switch'></button>

e no seu script, uma função como

function(){
let div = document.getElementById('minhaDiv');
div.style.display==='none' ? div.style.display = 'block' : div.style.display = 'none'
}

Enfim, espero ter ajudado.

0

Para ter o texto ocultado ao iniciar o programa use style="display: none;" no elemento

<div id="minhaDiv" style="display: none;">

O mais apropriado é alterar o texto do h1 ao invés do botão

var h1 = document.getElementById("btn");

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

      if (display == "none") {
        document.getElementById(el).style.display = 'block';
        h1.innerHTML = "Esconder";
      } else {
        document.getElementById(el).style.display = 'none';
        h1.innerHTML = "Mostrar";
      }
 }
<div id="minhaDiv" style="display: none;">
 <h1>Conteudo</h1>
</div>
<button type="button" onclick="Mudarestado('minhaDiv')"><h1 id="btn">Mostrar</h1></button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .