Hide div with Javascript

Question

I’m trying to hide a div with Javascript.

Only the buttons are not activating anything and are only hiding everything. In fact, it is not even activating the interactivity of the buttons.

The main idea is that when you click the letter A Table A appears, hiding the others. And when you click on the letter B, hides the A.

Example below (complete code in https://jsfiddle.net/Larck6/3vpmnx2r/1/):

var div1;
var div2;

window.onload = function(){

  div1 = document.getElementById("div1");
  div2 = document.getElementById("div2");

  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;

  div1.classList.add ("escondido");
  div2.classList.add ("escondido");


}

function mostrarDiv1(){

  div1.classList.remove("escondido");
  div1.classList.add("escondido");

}

function mostrarDiv2(){
  div1.classList.add("escondido");
  div1.classList.remove("escondido");

}

.escondido{
  display:none;
}

.botao{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  margin-top:15%;
  color: #c40027;
  font-weight: bold;
  z-index:2;
}

<div class="container">

<div class="fundo">

<div class="cabecalho">

  <div class="logo"><img src="img/Logo%20Preta%20RCM.png"/></div>
  <div class="titulo">ESTOQUE BOBINAS</div>
  <div class="logo2"> <img src="img/png%20logo%20vermelha.png"></div>

</div>
<!-- >>>>>>>>> botao <<<<<<<<< -->
<div class="botao">
<button id="bt1"> A </button>
<button id="bt2"> B </button>
<button id="bt3"> C </button>
<button id="bt4"> E </button>
<button id="bt5"> F </button>
<button id="bt6"> G </button>
<button id="bt7"> H </button>
<button id="bt8"> I </button>
<button id="bt9"> J </button>
<button id="bt10"> Z </button> 
</div>
<!-- >>>>>>> FIM botao <<<<< -->



<div id="div1">

<!-- >>>>Tabela completa A<<<<  -->

<div class="pratileira_a"><h3>Prateileira A</h3></div>

<div class="parte1">

<div class="partileiraandar"> 

  <div class="andar">Andares</div>
  <div class="andar_p">Andar 0</div>
  <div class="andar_p">Andar 1</div>
  <div class="andar_p">Andar 2</div>
  <div class="andar_p">Andar 3</div>

</div>
 <!-- FIM  1 a 8 da -->
<div class="abc_dados_prateleiras">
  <div class="p_l">1</div>
  <div class="p_l">2</div>
  <div class="p_l">3</div>
  <div class="p_l">4</div>
  <div class="p_l">5</div>
  <div class="p_l">6</div>
  <div class="p_l">7</div>
  <div class="p_l">8</div>
 </div> 
 <!-- FIM  1 a 8 da -->


<!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
<div class="dados_pratileira_1">
  <div id="andar0_1">256 aqui tem um texto muito grande</div>
  <div id="andar0_2">265</div>
  <div id="andar0_3">285</div>
  <div id="andar0_4">256</div>
  <div id="andar0_5">259</div>
  <div id="andar0_6">285</div>
  <div id="andar0_7">259</div>
  <div id="andar0_8">285</div>

  <!-- andar 1 -->
  <div id="andar1_1">256 aqui tem um texto muito grande</div>
  <div id="andar1_2">265</div>
  <div id="andar1_3">285</div>
  <div id="andar1_4">256</div>
  <div id="andar1_5">259</div>
  <div id="andar1_6">285</div>
  <div id="andar1_7">259</div>
  <div id="andar1_8">285</div>


  <!-- andar 2 --> 
  <div id="andar2_1">256 aqui tem um texto muito grande</div>
  <div id="andar2_2">265</div>
  <div id="andar2_3">285</div>
  <div id="andar2_4">256</div>
  <div id="andar2_5">259</div>
  <div id="andar2_6">285</div>
  <div id="andar2_7">259</div>
  <div id="andar2_8">285</div>


  <!-- andar 3 -->
  <div id="andar3_1">256 aqui tem um texto muito grande</div>
  <div id="andar3_2">265</div>
  <div id="andar3_3">285</div>
  <div id="andar3_4">256</div>
  <div id="andar3_5">259</div>
  <div id="andar3_6">285</div>
  <div id="andar3_7">259</div>
  <div id="andar3_8">285</div>

  <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

</div> 

</div> 

<!-- >>>> FIM Tabela completa A <<<<  -->

</div> <!-- >>>> FIM da DIV1 do botao 1 <<<<  -->



<div id="div2">

  <h1> TESTE </h1>

</div>

Answer 1

Hello, Larck.
By the behavior I understood, your code was almost correct. Check if this is the behavior you want according to the code below. Only two minor changes have been made and are commented.

I would recommend creating methods that you hide all divs and a method that takes as a parameter the Id of div that should appear, then it hides all and show the one received by parameter, so you will not need to keep creating method for each div and rewriting code.

var div1;
var div2;

window.onload = function(){

  div1 = document.getElementById("div1");
  div2 = document.getElementById("div2");

  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;

  div1.classList.add ("escondido");
  div2.classList.add ("escondido");


}

function mostrarDiv1(){

  div1.classList.remove("escondido");
  div2.classList.add("escondido"); //mudei de div1 para div2

}

function mostrarDiv2(){
  div1.classList.add("escondido");
  div2.classList.remove("escondido"); //mudei de div1 para div2

}

.escondido{
  display:none;
}

.botao{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  margin-top:15%;
  color: #c40027;
  font-weight: bold;
  z-index:2;
}

<div class="container">

<div class="fundo">

<div class="cabecalho">

  <div class="logo"><img src="img/Logo%20Preta%20RCM.png"/></div>
  <div class="titulo">ESTOQUE BOBINAS</div>
  <div class="logo2"> <img src="img/png%20logo%20vermelha.png"></div>

</div>
<!-- >>>>>>>>> botao <<<<<<<<< -->
<div class="botao">
<button id="bt1"> A </button>
<button id="bt2"> B </button>
<button id="bt3"> C </button>
<button id="bt4"> E </button>
<button id="bt5"> F </button>
<button id="bt6"> G </button>
<button id="bt7"> H </button>
<button id="bt8"> I </button>
<button id="bt9"> J </button>
<button id="bt10"> Z </button> 
</div>
<!-- >>>>>>> FIM botao <<<<< -->



<div id="div1">

<!-- >>>>Tabela completa A<<<<  -->

<div class="pratileira_a"><h3>Prateileira A</h3></div>

<div class="parte1">

<div class="partileiraandar"> 

  <div class="andar">Andares</div>
  <div class="andar_p">Andar 0</div>
  <div class="andar_p">Andar 1</div>
  <div class="andar_p">Andar 2</div>
  <div class="andar_p">Andar 3</div>

</div>
 <!-- FIM  1 a 8 da -->
<div class="abc_dados_prateleiras">
  <div class="p_l">1</div>
  <div class="p_l">2</div>
  <div class="p_l">3</div>
  <div class="p_l">4</div>
  <div class="p_l">5</div>
  <div class="p_l">6</div>
  <div class="p_l">7</div>
  <div class="p_l">8</div>
 </div> 
 <!-- FIM  1 a 8 da -->


<!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
<div class="dados_pratileira_1">
  <div id="andar0_1">256 aqui tem um texto muito grande</div>
  <div id="andar0_2">265</div>
  <div id="andar0_3">285</div>
  <div id="andar0_4">256</div>
  <div id="andar0_5">259</div>
  <div id="andar0_6">285</div>
  <div id="andar0_7">259</div>
  <div id="andar0_8">285</div>

  <!-- andar 1 -->
  <div id="andar1_1">256 aqui tem um texto muito grande</div>
  <div id="andar1_2">265</div>
  <div id="andar1_3">285</div>
  <div id="andar1_4">256</div>
  <div id="andar1_5">259</div>
  <div id="andar1_6">285</div>
  <div id="andar1_7">259</div>
  <div id="andar1_8">285</div>


  <!-- andar 2 --> 
  <div id="andar2_1">256 aqui tem um texto muito grande</div>
  <div id="andar2_2">265</div>
  <div id="andar2_3">285</div>
  <div id="andar2_4">256</div>
  <div id="andar2_5">259</div>
  <div id="andar2_6">285</div>
  <div id="andar2_7">259</div>
  <div id="andar2_8">285</div>


  <!-- andar 3 -->
  <div id="andar3_1">256 aqui tem um texto muito grande</div>
  <div id="andar3_2">265</div>
  <div id="andar3_3">285</div>
  <div id="andar3_4">256</div>
  <div id="andar3_5">259</div>
  <div id="andar3_6">285</div>
  <div id="andar3_7">259</div>
  <div id="andar3_8">285</div>

  <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

</div> 

</div> 

<!-- >>>> FIM Tabela completa A <<<<  -->

</div> <!-- >>>> FIM da DIV1 do botao 1 <<<<  -->



<div id="div2">

  <h1> TESTE </h1>

</div>

I hope I’ve helped.