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

1

The following code does the following: When I click the button Show Button another button appears, however, let's suppose I click F5 , the button disappears.

What tool could I use to prevent this from happening and the button stays there after 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>
    
asked by anonymous 03.10.2017 / 21:30

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, he would have the page the way he chose (with the button in that example) .

Another way would be to use 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 will not be able to test on Sandbox , but you can test on this link

    
03.10.2017 / 21:40
1

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

Example on 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 information "1" (it can be any information, the important thing is that localStorage has some value, even a true - localStorage.mostrabotao2 = true; ) in localStorage and checks to see if it has value every time the page loads. If there is a value, the button is displayed, otherwise it does nothing and the button is still hidden by CSS.

    
03.10.2017 / 21:46