Question 210771 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – My code is not updating correctly my page

I have two divs, one with display:none and the other with display:block.

When I click the button, I invert the div’s displays and call the window.reload method.

Unfortunately it updates but it is a blank page and does not come out of it. What am I doing wrong?

MY code JS :

function showHistorico(){

  window.location.reload();
 tabPrincipal.style.display="none";
tabHistorico.style.display="block";

}

My HTML

<button class="btn btn-sm btn-primary btn-block" id="btnHistorico" onclick="showHistorico()">HISTÓRICO</button>

 <table class="table table-dark table-hover" id="tabPrincipal"> ... </table>
 <table class="table table-dark table-hover" id="tabHistorico" style="display:none"> ... </table>

Unfortunately it updates but it is a blank page and does not come out of it. What am I doing wrong?

MY code JS :

function showHistorico(){

  window.location.reload();
 tabPrincipal.style.display="none";
tabHistorico.style.display="block";

}

My HTML

<button class="btn btn-sm btn-primary btn-block" id="btnHistorico" onclick="showHistorico()">HISTÓRICO</button>

 <table class="table table-dark table-hover" id="tabPrincipal"> ... </table>
 <table class="table table-dark table-hover" id="tabHistorico" style="display:none"> ... </table>
Tags:

2

Answers


  1. 0

    Define your variables first.

    No need to reload the page, as I mentioned in the comments. If you reload then the rest of the code won’t execute.

    const tabPrincipal = document.getElementById("tabPrincipal");
const tabHistorico = document.getElementById("tabHistorico");

function showHistorico() {

  //window.location.reload();
  tabPrincipal.style.display = "none";
  tabHistorico.style.display = "block";

}
    <button class="btn btn-sm btn-primary btn-block" id="btnHistorico" onclick="showHistorico()">HISTÓRICO</button>
<br>
<table class="table table-dark table-hover" id="tabPrincipal">
  <thead>
    <tr>
      <td>table principal header</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table principal body</td>
    </tr>
  </tbody>
</table>
<br>
<table class="table table-dark table-hover" id="tabHistorico" style="display:none;">
  <thead>
    <tr>
      <td>table historico header</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>table historico body</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    All the explanations are given in comments. If you have any question feel free to ask.

    <button class="btn btn-sm btn-primary btn-block" id="btnHistorico" onclick="showHistorico()">HISTÓRICO</button>

<!-- display: none; can't hide unless you write anything within the proper table structure like below -->
<table class="table table-dark table-hover" id="tabPrincipal"><tr><td>...tabPrincipal</td></tr></table>
<table class="table table-dark table-hover" id="tabHistorico" style="display: none;"><tr><td>...tabHistorico</td></tr></table>

<script>
  // You need to grab the elements first
  var tabPrincipal = document.querySelector('#tabPrincipal');
  var tabHistorico = document.querySelector('#tabHistorico');

  function showHistorico(){
    // This is just a page refresh which I believe is not necessary here (so hiding it)
    // window.location.reload();
    tabPrincipal.style.display= "none";
    tabHistorico.style.display= "block";
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search