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

Try this:

var div1 = document.getElementById('Div1'),
    div2 = document.getElementById('Div2');
function switchVisible() {
  if(!div1) return;
  if (getComputedStyle(div1).display == 'block') {
    div1.style.display = 'none';
    div2.style.display = 'block';
  } else {
    div1.style.display = 'block';
    div2.style.display = 'none';
  }
}
document.getElementById('Button1').addEventListener('click', switchVisible);

#Div2 {
  display:none;
}

Div 1
Div 2

---

However, this approach may be better:

var wrapper = document.getElementById('wrapper');
function switchVisible() {
  wrapper.classList.toggle('switched');
}
document.getElementById('Button1').addEventListener('click', switchVisible);

#wrapper > :last-child {
  display: none;
}
#wrapper.switched > :last-child {
  display: block;
}
#wrapper.switched > :first-child {
  display: none;
}

  
Div 1
  
Div 2