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. <input type="reset" value="C"/> clears the field but holds the last buttons I've pressed in memory.

    <script>
      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);
      }

    </script>

    <div id="calculator">

      <form>
        <input type="text" id="output" />
      </form>

      <button onclick="handleClick(1)">1</button>
      <button onclick="handleClick(2)">2</button>
      <button onclick="handleClick(3)">3</button>
      <button onclick="handleClick(4)">4</button>
      <button onclick="handleClick(5)">5</button>
      <button onclick="handleClick(6)">6</button>
      <button onclick="handleClick(7)">7</button>
      <button onclick="handleClick(8)">8</button>
      <button onclick="handleClick(9)">9</button>
      <button onclick="clear(0)">C</button>
      <button onclick="handleClick('+')">+</button>
      <button onclick="handleClick('-')">-</button>
      <button onclick="handleClick('/')">/</button>
      <button onclick="handleClick('*')">*</button>
      <button onclick="evaluateExpression()">=</button>
    </div>

The "clear" function just does not want to work. Where am I going wrong?

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. <input type="reset" value="C"/> clears the field but holds the last buttons I've pressed in memory.

    <script>
      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);
      }

    </script>

    <div id="calculator">

      <form>
        <input type="text" id="output" />
      </form>

      <button onclick="handleClick(1)">1</button>
      <button onclick="handleClick(2)">2</button>
      <button onclick="handleClick(3)">3</button>
      <button onclick="handleClick(4)">4</button>
      <button onclick="handleClick(5)">5</button>
      <button onclick="handleClick(6)">6</button>
      <button onclick="handleClick(7)">7</button>
      <button onclick="handleClick(8)">8</button>
      <button onclick="handleClick(9)">9</button>
      <button onclick="clear(0)">C</button>
      <button onclick="handleClick('+')">+</button>
      <button onclick="handleClick('-')">-</button>
      <button onclick="handleClick('/')">/</button>
      <button onclick="handleClick('*')">*</button>
      <button onclick="evaluateExpression()">=</button>
    </div>

The "clear" function just does not want to work. Where am I going wrong?

• javascript
• forms

• stackoverflow.com/about – Xotic750 Commented May 11, 2013 at 10:06

8 Answers 8

Do reset on form . link

document.getElementById("frm").reset();

or Set the value of textbox like this

 document.getElementById('output').value = "";

Why not just use the built-in reset type?

<input type="reset" value="C"/>

This would have to be inside the <form>.

For resetting form input fields, this worked for me:

 document.getElementById('elementId').value = "";

If you are trying to reset elements on the page that isn't a form, this worked for me:

 document.getElementById('elementId').innerHTML = "";

Are you trying to do this.?

then try this code,

function clear(data) {
         document.getElementById("output").value=data; 
      }

Can you not just set the text of output to a blank string?

( or )

more likely if your doing a calculator set it to 0?

document.getElementById("output").value = 0;

Here is an example of clearing the value of an input field

<input id="entry" type="text"></input>
<button id="clear">Clear</button>

var entry = document.getElementById("entry"),
    clear = document.getElementById("clear");

function clearfield() {   
    // EDIT: place code for clearing anything else that would be affected here
    entry.value = "";
}

clear.addEventListener("click", clearfield, false);

on jsfiddle

And here is an example of using form.reset

<form id="myForm">
    <input id="entry" type="text"></input>
</form>
<button id="clear">Clear</button>

var clear = document.getElementById("clear"),
    form = document.getElementById("myForm");

function clearfield() {
    // EDIT: place code for clearing anything else that would be affected here
    form.reset();
}

clear.addEventListener("click", clearfield, false);

on jsfiddle

Also, inline javascript is considered bad practice and you should consider a method such as addEventListener instead.

i.e. onclick="doit();"

Why use addEventListener?

addEventListener is the way to register an event listener as specified in W3C DOM. Its benefits are as follows:

It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used. It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling) It works on any DOM element, not just HTML elements.

On C button click, clear the output value

 document.getElementById('output').value = "";

 $(function(){
    $("input").click(function(){
        if(this.value == 0)
        {
            this.value='';
            return;
        }
        else
        {
            return;
        }
    });
});

Cange the "input" to #YourFieldId, and get rid of the if inside, but keep the this.value=' ';

That is the best way to clear fields on click if you can use jquery...

You could also always have a condition to check the input and then clear like the code above clears input fields that have a '0' in them.