how to show elements when button was clicked in JavaScript-CodePudding

I tried to create codes which elements are showed when button was clicked, it actually could make them shows but I want to them to show separately on each button, (I want to hide other elements when other button was clicked), where do I need to fix?

function button1() {
  'use strict';
 document.getElementById("red1"). className = "red1" ;
 document.getElementById("blue1"). className = "blue1" ;
}



function button2(){
  'use strict';
  document.getElementById("red2"). className = "red2" ;
  document.getElementById("blue2"). className = "blue2" ;
}

function button3(){
  'use strict';
  document.getElementById("red3"). className = "red3" ;
  document.getElementById("blue3"). className = "blue3" ;
}

function button4(){
  'use strict';
  document.getElementById("red4"). className = "red4" ;
  document.getElementById("blue4"). className = "blue4" ;
}


function button5(){
  'use strict';
  document.getElementById("red5"). className = "red5" ;
  document.getElementById("blue5"). className = "blue5" ;
}

function button6(){
  'use strict';
  document.getElementById("green6"). className = "green6" ;
  document.getElementById("red6"). className = "red6" ;
  document.getElementById("blue6"). className = "blue6" ;
}


function init(){
  'use strict';
  document.getElementById("btn1").addEventListener("click",button1);
  document.getElementById('btn2').addEventListener('click',button2);
  document.getElementById('btn3').addEventListener('click',button3);
  document.getElementById('btn4').addEventListener('click',button4);
  document.getElementById('btn5').addEventListener('click',button5);
  document.getElementById('btn6').addEventListener('click',button6);
}

window.onload = init;

.hidden{
  display: none;
}

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
}

.red2{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue2{
  width: 300px;
  height: 300px;
  background-color: blue;
}


.red3{
  width: 600px;
  height: 600px;
  background-color: red;
}

.blue3{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-left:600px;
  margin-top: -600px; 
}



.red4{
  width: 600px;
  height: 600px;
  background-color: red;
  margin-left: 300px;

}

.blue4{
  width: 300px;
  height: 300px;
  background-color: blue; 
  position: absolute;
  margin-top: -400px;
}

.red5{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 10;
}

.blue5{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top:36px;
  margin-left: 45px;
  position: absolute;
  z-index: 40;
}


.red6{
  width: 600px;
  height: 600px;
  background-color: red;
  position: absolute;
  z-index: 20;

}

.blue6{
  width: 300px;
  height: 300px;
  background-color: blue;
  z-index: 100;
  position: absolute;

}



.green6{
  width: 900px;
  height: 700px;
  background-color: green;
  margin-top: 0;
  z-index: 10;
  position: absolute;
  
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
    <title>2 Boxes</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<div id="outer">
<h2>Boxes</h2>
  <form id="myForm">
    <fieldset>
      <label>Blue box sits inside the red box</label>
      <button type="button" id="btn1">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits under the red box</label>
      <button type="button" id="btn2">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits to the right of the red box</label>
      <button type="button" id="btn3">Click</button>
    </fieldset>
    <fieldset>
      <label>Red box sits to the right of the blue box</label>
      <button type="button" id="btn4">Click</button>
    </fieldset>
    <fieldset>
      <label>Blue box sits inside the red box and move the blue box 20px down and 45 pixels to the right of the top left hand corner of the red box</label>
      <button type="button" id="btn5">Click</button>
    </fieldset>
    <fieldset>
      <label>Green box around both the blue and red boxes</label>
      <button type="button" id="btn6">Click</button>
    </fieldset>
  </form>
</div>

    <div id="button1" >
    <p  id="red1" class="hidden"></p>
    <p  id="blue1" class="hidden"></p>
  </div>

  <div id="button2">
    <p id="red2" class="hidden"></p>
    <p id="blue2" class="hidden"></p>
  </div>

  <div id="button3">
    <p id="red3" class="hidden"></p>
    <p id="blue3" class="hidden"></p>
  </div>

  <div id="button4">
    <p id="red4" class="hidden"></p>
    <p id="blue4" class="hidden"></p>
  </div>

  <div id="button5">
    <p id="red5" class="hidden"></p>
    <p id="blue5" class="hidden"></p>
  </div>

  <div id="button6">
    <p id="red6" class="hidden"></p>
    <p id="blue6" class="hidden"></p>
    <p id="green6" class="hidden"></p>
  </div>
</body>
</html>

CodePudding user response：

I would prefer to write an additional function, which is hiding all elements and call this function at the begining of your other functions. Example:

function hideAll() {
 document.getElementById("red1").className = "hidden" ;
 document.getElementById("blue1").className = "hidden" ;
 ...
}

Call the function in other functions. Example:

function button1() {
 hideAll();
 document.getElementById("red1").className = "red1" ;
 document.getElementById("blue1").className = "blue1" ;
}

Now you also have to adapt your other CSS rules in order to remove the display: none as follows:

.red1{
  width: 600px;
  height: 600px;
  background-color: red;
  display: block;
}

.blue1{
  width: 300px;
  height: 300px;
  background-color: blue;
  margin-top: -600px;
  display: block;
}
 ...

Bare in mind, that this way of programming is very inefficient and there are many ways to refactor this code in order to be more readable and adaptable.