使用 HTML 和 JavaScript 添加清除按钮答案

【问题标题】：Adding a clear button with HTML and JavaScript使用 HTML 和 JavaScript 添加清除按钮
【发布时间】：2013-12-11 23:54:27
【问题描述】：

我不明白为什么这不起作用！我的清除按钮什么都不做。这是我的整个表格/计算器。我需要“清除”按钮来删除“英尺”和“米”字段中的文本。

我正在做一个课堂项目。

<body>
<form name="myForm">

<table  border = "0" width = 300px>
<tr>
  <td> 
    Feet:
  </td>
  <td>
    <input type="text" id="feet">
  </td>
</tr>
<tr>
  <td> 
    Meters:
  </td>
  <td>
    <input type="text" id="meters">
</tr>
</table>
</form>
</body>

<p>
<button onClick="calculate()">Convert</button>
<button onClick="clear()">Clear</button>
<p>

<script>

function calculate()
{
  var feet = document.getElementById("feet").value;
  var meters = document.getElementById("meters").value;
  var final;

  if (feet == "" && meters == "")
  {
    alert("Try Again");
    return;
  }
  else if (!(feet == "") && !(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();
}

</script>

【问题讨论】：

你的之外还有东西
你为什么不直接使用重置按钮？ <button type="reset">Clear</button> 为什么不使用提交按钮？
换句话说，你正在流血的段落和按钮

标签： javascript html button

【解决方案1】：

实际的问题是你正在使用这个

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

但您的表单没有 ID，因此您将添加 ID

<form name="myForm" id="myForm">

Working demo

这对你有用，但如果你想修复你的代码，请继续阅读。

您有一些错误。您的表单需要一个 id，因为您使用的是 getElementById
无需使用按钮来提交执行按钮功能的 javascript。
你有 </body> 然后更多的 HTML。
缺少</td>
<table border = "0" width = 300px> 语法不正确（您应该真正使用样式属性或 CSS 文件）

您还可以使用提交按钮并将函数绑定到正在提交的表单的操作，我已经在这里完成了。

<body>
<form name="myForm" id="myForm">
    <table  border = "0" width = "300">
        <tr>
            <td>Feet:</td>
            <td><input type="text" id="feet"></td></tr>
        <tr>
            <td>Meters:</td>
            <td><input type="text" id="meters"></td>
        </tr>
    </table>
    <button type="submit">Convert</button>
    <button type="reset">Clear</button>
</form>

<script>

document.getElementById("myForm").onsubmit=function(){
    calculate();
    return false;
};

function calculate()
{
  var feet = document.getElementById("feet").value;
  var meters = document.getElementById("meters").value;
  var final;

  if (feet == "" && meters == "")
  {
    alert("Try Again");
    return;
  }
  else if (!(feet == "") && !(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;
  }
} 

</script>
</body>

【讨论】：

关闭 TD 标记是可选的，尽管 HTML5 似乎已经省略了这一点。
@RobG 好点，但 OP 有时使用它们有时不使用它们，因此表明它们丢失了

【解决方案2】：

<button type="reset" value="Reset">

为什么要在附加到清除“按钮”的 JS 之外使用 JS 来完成这个？我会坚持使用 HTML，只使用简单的表单重置。

或者，在这里试试这个： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset

【讨论】：

重点，只是想强调表格的简单性。

【解决方案3】：

将<form name="myForm"> 更改为<form name="myForm" id="myForm">，因为您正在寻找ID 为myForm 的元素

【讨论】：