title: show/hide image on click
body: <p>I need to show/hide image in html page. I thought its very simple. But why I am getting error 'visible' undefined.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" &gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;title&gt;Ajax Test
      &lt;/title&gt;
      &lt;script type="text/javascript"&gt;
  &lt;!--
      function showImage(){
          document.getElementById('loadingImage').style.visibility=visible;
      }
  
      --&gt;
  
      &lt;/script&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;input type="button" value="Ajax Button" onclick="showImage();"/&gt;
      &lt;img id="loadingImage" src="ajax-loader.gif" style="visibility:hidden"/&gt;
  
  &lt;/body&gt;
  </code></pre>