Onclick hide one div and show 2nd div.... in IE9

Question

Working with an ancient device called Internet Explorer 9 (very long boring story to why I am using this) But trying to get it so when a button is clicked it hides both div "one" and the button but shows div "two" I can get it to work with Fire Fox but no clue to how to get IE9 to work all I get is a button that does nothing.

Answer 1

You have to use the native onclick event in your html, and call a function in your javascript for switching the visibility on both your divs.

Refer code:

function switchVisible() {
  if (document.getElementById('div1')) {

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

#div2 {
  display: none;
}

<div id="div1">Div 1</div>
<div id="div2">Div 2</div>

<input id="Button1" type="button" value="Click" onclick="switchVisible();" />