Hide text by pressing button

Asked

Viewed 45 times

-1

I used the code from another question from the website so that you could hide/display text by clicking on a button, but I would like to know if there is any way to have the text already hidden when starting the program and, when pressing the button, the text is displayed.

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>

javascript

2 answers

0

Well, apparently you didn’t understand the basis of the DOM, so to clarify...

Basically, javascript within an HTML page has the freedom to modify CSS elements within HTML objects, such as the edge of one or a maximum size of one

.

When you call an HTML element within a script (using querySelector() for example), you "pull" the HTML information in object format, which has its proper properties.

So far, you have your basic notions of script-web interaction, ok?

When loading, a page will be displayed with the CSS settings you set, so to get invisible, you must set on the object that the display: none.

Following this, I suggest you take a look at JS objects, and the basics of the language, on some site like W3school.

Ahead, the important thing to think about is:

With document.getElementById(), you are accessing the DOCUMENT page (document), and right away asking you to look for and return the element with certain ID, through the method getElementById()

How the elements change through javascript works then?

You can view this process as a TREE.

Its trunk is the document, and the first branch is getElementById(), that now accesses your element with cited id.

Now you want to access the feature DISPLAY of that element, which in that example will be None or block. The feature is accessible within the requirement style, of the CSS.

So we follow the branch style, and then in the desired feature, the display.

The code then would be: document.getElementById('el').style.display;

With a simple conditional you can say that this element gets the feature None (does not appear) or block (appears), calling a function via its button:

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

and in your script, a function such as

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

Anyway, I hope I helped.

0

To have the text hidden when starting the program use style="display: none;" in the element

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

Most appropriate is to change the text of the h1 instead of the button

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>

Browser other questions tagged javascript

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