How to hide one div and show another div using button onclick?

Question

I have two div in my html file. I want to hide the 1st div and show another div on html input button onclick event.

Here is my code,

Answer 1

you might wanna try this..

    function switchVisible() {
    	var div1=document.getElementById('Div1');
    	var div2=document.getElementById('Div2');
    	
      if (div1 !== undefined && div2 !== undefined) {
    	  div1.style.display = div2.style.display === '' ? 'none' : div2.style.display === 'none' ? 'none' : 'block';
    	  div2.style.display = div1.style.display === 'block' ? 'none' : 'block';
      }
    }

#Div1{
 display: block;
 background: blue;
}

#Div2 {
  display: none;
  background: red;
}

.divs
{
 width: 50px;
 height: 50px;
 border: 1px solid #000;
}