Question

我无法弄清楚为什么这不起作用！我的清除按钮 nothing 。这是我的整个表格/计算器。我需要“清除”按钮才能摆脱“英尺”和“米”字段中的文字。

我正在做一个班级项目。

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

Answer 1

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

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

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

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

Working demo

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

你有一些错误。您的表单需要ID，因为您使用的是getElementById
没有必要使用按钮来提交按钮可以执行的操作您有</body>个HTML 缺少</td>
<table border = "0" width = 300px>语法不正确（您应该使用style属性或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>

Answer 2

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

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

或者，请在此处尝试： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset

Answer 3

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

添加带有HTML和JavaScript的清除按钮

3 个答案: