title: getElementById().value Returning Undefined
body: <p>I'm writing some simple code to change the visibility of an image when a button is clicked, but my <code>document.getElementById().value</code> is coming up as <code>undefined</code>. (I've tried replacing <code>.value</code> with <code>.display</code> - same result).</p>
  
  <p>What could be the problem?</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script&gt;
          function hideImage(imageId){
              document.getElementById(imageId).visibility="hidden";
          }
          function showImage(imageId){
              document.getElementById(imageId).visibility="visible";
          }
          function switchVis(imageId){
              var curVis = document.getElementById(imageId).value;
              if(document.getElementById(imageId).value=="hidden"){
                  document.getElementById("output").innerHTML="hidden";
                  showImage(imageId);
              }
              else if(document.getElementById(imageId).value=="visible"){
                  hideImage(imageId);
                  document.getElementById("output").innerHTML="visible";
              }
              else{
                  alert("Visibility Issue!\nVisibility value is " + curVis);
              }
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;img src="images/k3.gif" id="k3"&gt;&lt;p&gt;
      &lt;button onclick=switchVis('k3')&gt;Visibility&lt;/button&gt;
      &lt;div id="output"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>