title: Display another DIV when submit button is clicked
body: <p>This is my <code>script</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
             function showlevel1() {
                 var l1 = document.getElementById('default');
                 l1.style.display = 'block';
                 var l2 = document.getElementById('secondDiv');
                 l2.style.display = 'none';
             }
  
             function showlevel2() {
                 var l2 = document.getElementById('secondDiv');
                 l2.style.display = 'block';
                 var l1 = document.getElementById('default');
                 l1.style.display = 'none';
  
             }
             function selectHandler(select) {
  
                 if (select.value == 'count') {
                     showlevel2();
  
                 } else if (select.value == 'Top') {
                     showlevel1();
                 } 
             }
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
  &lt;select id='type'&gt;
  &lt;option value="Top"&gt;TOP&lt;/option&gt;
  &lt;option value="count"&gt;COUNT&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type='submit' value='submit' onclick=selectHandler(this)&gt;
  &lt;/form&gt;
  
  &lt;div id='default' style="display:block"&gt;
      &lt;h1&gt;Div 1&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div id='secondDiv' style="display:none"&gt;
      &lt;h2&gt; Div 2&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I load the page the <code>DIV 1</code> does shows up, since the property is set to <code>display:'Block'</code> but when I perform the selection from drop down it never changes to <code>DIV2</code> upon the <code>Count</code> selection from drop down and a submit click button?</p>
  
  <p>Can anyone please help in figuring out the issue and let me know what am I doing wrong?</p>
  
  <p>Thanks</p>