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

Probably you have some syntax errors in your code. This one is working:

function switchVisible() {
    if (document.getElementById('Div1') !== undefined) {

        if (document.getElementById('Div1').style.display == 'block') {
            document.getElementById('Div1').style.display = 'none';
            document.getElementById('Div2').style.display = 'block';
        } else {
            document.getElementById('Div1').style.display = 'block';
            document.getElementById('Div2').style.display = 'none';
        }
    }
}

#Div1 {
    display:none;
}
#Div1 {
    background: red;
}
#Div2 {
    background: green;
}
#Div1, #Div2 {
    width: 50px;
    height:50px;
}