单击时清除 Javascript 中的表单字段

Clearing a form field in Javascript upon click

提问by jenno

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.

很抱歉提前提出新问题！我正在用 Javascript 制作一个计算器应用程序，并且很难获得“C”（清除）按钮来清除该字段。编辑：澄清一下，清除按钮不仅应该清除字段，还应该清除内存中的所有内容，以便我可以开始新的计算。<input type="reset" value="C"/>清除该字段但保留我在内存中按下的最后一个按钮。

    <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?

“清除”功能只是不想工作。我哪里错了？

回答by NullPointerException

Do reset on form . link

重新设置表格。关联

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

or Set the value of textbox like this

或像这样设置文本框的值

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

回答by nullability

Why not just use the built-in resettype?

为什么不直接使用内置reset类型？

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

This would have to be inside the <form>.

这必须在<form>.

回答by Rajaprabhu Aravindasamy

Are you trying to do this.?

你想这样做吗。？

then try this code,

然后试试这个代码，

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

回答by CosmicChild

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?

如果您使用计算器将其设置为 0，则更有可能？

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

回答by Xotic750

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

在jsfiddle 上

And here is an example of using form.reset

这是使用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

在jsfiddle 上

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

此外，内联 javascript 被认为是不好的做法，您应该考虑使用诸如addEventListener 之类的方法。

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

IE 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.

为什么要使用 addEventListener？

addEventListener 是注册 W3C DOM 中指定的事件侦听器的方法。它的好处如下：

它允许为一个事件添加多个处理程序。这对于即使使用其他库/扩展也需要正常工作的 DHTML 库或 Mozilla 扩展特别有用。当侦听器被激活（捕获与冒泡）时，它可以让您对阶段进行更细粒度的控制。它适用于任何 DOM 元素，而不仅仅是 HTML 元素。

回答by Tamil Selvan C

On C button click, clear the output value

在 C 按钮上单击，清除输出值

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

回答by Ajay Medury

 $(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=' ';

将“输入”更改为#YourFieldId，并去掉里面的 if，但保留 this.value=' ';

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

如果您可以使用 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.

您也可以始终有一个条件来检查输入，然后像上面的代码一样清除其中包含“0”的输入字段。