How to change the layout of a page without touching the source code?

Asked

Viewed 50 times

1

The code below does the following: When I click the button Show Button another button appears, however, let’s assume that I click F5, the button disappears.

What tool could I use to make it not happen and the button was right there after the F5 or until I create another button to hide it again?

function mostrarBt() {
  document.getElementById("botao1").style.display="block";
}
button#botao1 {display: none; margin-top: 5px;}
<button id="mostrar" onClick="javascript: mostrarBt();">Mostrar Botão</button>
<button id="botao1">Botão 1</button>

javascript html

  • Put it all inside a div, give it a id it and use Document.getElementById(id_da_div).innerHTML. Use the innerHTML

2 answers

4


There are many ways to do this, the most correct would be to store the user’s choice in the database, so whenever the user updates himself, he would have the page the way he chose (with the button in this example).

Another way would be using localStorage, a very simple example of how to do this.

if(!localStorage.button){
  document.getElementById('outButton').style.display = 'none'
}else{
  document.getElementById('outButton').style.display = 'block'
}

   
document.getElementById('show').onclick = function(){
    document.getElementById('outButton').style.display = 'block'
    localStorage.button = true
}
#outButton{
  display: none;
}
<button id="show">Mostrar Outro Botão</button>

<button id="outButton">MEU OUTRO BOTAO</button>

Remembering that you won’t be able to test on Sandbox, but you can test on this link

  • Thanks, I’ve never used Torage, but I’ll test the possibilities here

1

Use localStorage to save information in the browser and then use it:

Example in Jsfiddle:

CSS:

button#botao1 {display: none; margin-top: 5px;}
#esconder{ display: none; margin-top: 5px; }

HTML:

<button id="mostrar" onClick="javascript: mostrarBt();">Mostrar Botão</button>
<button id="esconder" onClick="javascript: escondeBt();">Esconder Botão</button>
<button id="botao1">Botão 1</button>

JS:

window.onload = function(){
    if(localStorage.mostrabotao2){
        mostrarBt();
    }

}

function mostrarBt() {
  document.getElementById("botao1").style.display="block";
  document.getElementById("esconder").style.display="block";
  localStorage.mostrabotao2 = 1;
}

function escondeBt() {
  document.getElementById("botao1").style.display="none";
  document.getElementById("esconder").style.display="none";
  localStorage.clear();
}

The above code saves the information "1" (can be any information, the important thing is that the localStorage has some value, even a true -- localStorage.mostrabotao2 = true;) in the localStorage and checks if it has value every time the page is loaded. If there is value, the button displays, if not, does nothing and the button remains hidden by CSS.

Browser other questions tagged javascript html

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