title: show/hide a button inside form with javascript
body: <p>I have started learning html , css,  javascript just 3 weeks ago. Here is my first and very simple program. It has a form , the form has 3 buttons and nothing else. One of the buttons is initially hidden. Clicking on one of the  other two buttons would make the hidden button visible. After making it visible, clicking on the third button would hide it again. Thats it , small simple program but it doesnt work. When I click the "show" button , the hidden button does not appear. I have been trying to fix it for 4 hours but I got no clue yet why its not working . Somebody help please.  By the way I dont know nothing about jquery, so only javascript help please.</p>
  
  <p>`</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;Useless Form&lt;/title&gt;
  
  &lt;script type="text/javascript" language="JavaScript"&gt;
  
      var hidden = true ;  
  
      function show() 
      {
           if (hidden) 
          {
             document.getElementById("third").style.visibility = 'visible';
             hidden = false ;          
          }
         else 
            {
                alert(" The button is already visible !") ;
            }
      }
  
      function hide() 
      {
  
         if (!hidden) 
          {
             document.getElementById("third").style.visibility = 'hidden';
             hidden = true ;
  
          }
         else 
            {
                alert(" The button is already hidden !") ;
            }
      }      
  
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
   h1
  {
      font-family: calibri;   
      text-align: center;         
  }
  
  button
  {  
      color: blue   ;
      font-size: 1em ;
      margin-left: 133px;
  
  }  
  
   table
   { 
     margin-top: 190px; 
   }
  
  form
  {
  
      position: absolute;
      top: 8%;
      bottom: 7%; 
      left: 15% ;
      right: 15% ;    
      color: #fb9  ;          
      background-color: #420 ;        
      border: 4px double #C96333  ;               
  }   
  body { background-color: #000 ; }
  </code></pre>
  
  <p>
  </p>
  
  <p></p>
  
  <pre><code> &lt;form&gt;
  
   &lt;h1&gt; My utter useless form &lt;/h1&gt; &lt;br&gt;
  
   &lt;table&gt;
     &lt;tr&gt;
  
       &lt;td&gt; &lt;button    id="first"    onclick="show()"  &gt;show&lt;/button&gt; &lt;/td&gt;
       &lt;td&gt; &lt;button    id="second"   onclick="hide()"&gt;hide&lt;/button&gt; &lt;/td&gt;
       &lt;td&gt; &lt;button    id="third"      hidden&gt;effected&lt;/button&gt; &lt;/td&gt;
  
     &lt;/tr&gt;
   &lt;/table&gt;   
  
  &lt;/form&gt;
  </code></pre>
  
  <p></p>
  
  <p>      </p>
  
  <p>`</p>