title: javascript functions only working once
body: <p>I have these two javascript functions that change a background and show and hide fields, however it only works once for each button</p>
  
  <pre><code>function showabout(){
  
  
          hidecontact = document.getElementById("contactus");
  
          hidecontact.style.display = "none";
  
  
          hide.style.backgroundImage = "url(aboutus.jpg)";
  
  
          showabout = document.getElementById("aboutus");
          showabout.style.display = "inline";
          showabout.style.cssFloat = "left";
          secbuttons.style.paddingLeft = "670px";
  
  
  
  
          }
  
          function showcontact(){
  
  
          hideabout = document.getElementById("aboutus");
          hideabout.style.display = "none";   
  
  
          hide.style.backgroundImage = "url(contact.jpg)";
  
  
          showcontact = document.getElementById("contactus");
          showcontact.style.display = "inline";
          showcontact.style.cssFloat = "left";
          secbuttons.style.paddingLeft = "670px";
  
  
  
  
          }
  
  
     &lt;font color="#33FF66"&gt;&lt;h2 style="cursor:pointer" onmouseover = "showabout()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h2&gt;&lt;/font&gt;
  
  &lt;font color="#33FF66"&gt;&lt;h2 style="cursor:pointer" onclick="showcontact()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h2&gt;&lt;/font&gt;&lt;br /&gt;
  
  &lt;font color="#33FF66"&gt;&lt;h2 style="cursor:pointer" onmouseover = "showcontact()"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h2&gt;&lt;/font&gt;
  </code></pre>
  
  <p>The three H2s are the lines causing the errors. It says "uncaught type error, object is not a function".</p>