title: Clearing a form field in Javascript upon click
body: <p>Sorry for the newb question in advance! I'm making a Calculator app in Javascript and am having a hard time getting the "C" (clear) button to clear the field. EDIT: To clarify, the Clear button should not only clear the field but also everything held in memory so that I can start a fresh calculation. <code>&lt;input type="reset" value="C"/&gt;</code> clears the field but holds the last buttons I've pressed in memory. </p>
  
  <pre><code>    &lt;script&gt;
        input = "";
  
        function handleClick(data) {
  
          input += data;
          document.getElementById("output").value = input;
          console.log(input);
        }
  
        function evaluateExpression(data) {
          input = document.getElementById("output").value = eval(input);
        }
  
        function clear(data) {
          input = data;
          input = document.getElementById("output").reset(); 
          console.log(input);
        }
  
      &lt;/script&gt;
  
      &lt;div id="calculator"&gt;
  
        &lt;form&gt;
          &lt;input type="text" id="output" /&gt;
        &lt;/form&gt;
  
        &lt;button onclick="handleClick(1)"&gt;1&lt;/button&gt;
        &lt;button onclick="handleClick(2)"&gt;2&lt;/button&gt;
        &lt;button onclick="handleClick(3)"&gt;3&lt;/button&gt;
        &lt;button onclick="handleClick(4)"&gt;4&lt;/button&gt;
        &lt;button onclick="handleClick(5)"&gt;5&lt;/button&gt;
        &lt;button onclick="handleClick(6)"&gt;6&lt;/button&gt;
        &lt;button onclick="handleClick(7)"&gt;7&lt;/button&gt;
        &lt;button onclick="handleClick(8)"&gt;8&lt;/button&gt;
        &lt;button onclick="handleClick(9)"&gt;9&lt;/button&gt;
        &lt;button onclick="clear(0)"&gt;C&lt;/button&gt;
        &lt;button onclick="handleClick('+')"&gt;+&lt;/button&gt;
        &lt;button onclick="handleClick('-')"&gt;-&lt;/button&gt;
        &lt;button onclick="handleClick('/')"&gt;/&lt;/button&gt;
        &lt;button onclick="handleClick('*')"&gt;*&lt;/button&gt;
        &lt;button onclick="evaluateExpression()"&gt;=&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The "clear" function just does not want to work. Where am I going wrong? </p>