title: Adding a clear button with HTML and JavaScript
body: <p>I can't figure out why this won't work! My clear button does <em>nothing</em>. Here is my entire form/calculator. I need the "clear" button just to get rid of the text in the "feet" and "meters" fields.</p>
  
  <p>I'm working on a class project.</p>
  
  <pre><code>&lt;body&gt;
  &lt;form name="myForm"&gt;
  
  &lt;table  border = "0" width = 300px&gt;
  &lt;tr&gt;
    &lt;td&gt; 
      Feet:
    &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" id="feet"&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt; 
      Meters:
    &lt;/td&gt;
    &lt;td&gt;
      &lt;input type="text" id="meters"&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;p&gt;
  &lt;button onClick="calculate()"&gt;Convert&lt;/button&gt;
  &lt;button onClick="clear()"&gt;Clear&lt;/button&gt;
  &lt;p&gt;
  
  &lt;script&gt;
  
  function calculate()
  {
    var feet = document.getElementById("feet").value;
    var meters = document.getElementById("meters").value;
    var final;
  
    if (feet == "" &amp;&amp; meters == "")
    {
      alert("Try Again");
      return;
    }
    else if (!(feet == "") &amp;&amp; !(meters == ""))
    {
      alert("Try Again");
      return;
    }
    else if (feet == "")
    {
      final = (meters*(3.28084));
      //Display!
      final = final.toFixed(2);
      document.getElementById("feet").value = final;
  
    }
    else if (meters == "")
    {
      final = (feet*(.3048));
      //Display!
      final = final.toFixed(2);
      document.getElementById("meters").value = final;
    }
  } 
  
  //****************************************************************
  function clear()
  {   
     document.getElementById("myForm").reset();
  }
  
  &lt;/script&gt;
  </code></pre>