添加带有HTML和JavaScript的clear按钮_Javascript_Html_Button

添加带有HTML和JavaScript的clear按钮

javascript html button

添加带有HTML和JavaScript的clear按钮,javascript,html,button,Javascript,Html,Button,我不明白为什么这行不通！我的清除按钮不起任何作用。这是我的全部表格/计算器。我需要“清除”按钮来清除“英尺”和“米”字段中的文本我在做一个班级专题 <body> <form name="myForm"> <table border = "0" width = 300px> <tr> <td> Feet: </td> <td> <input type="text" id="

我不明白为什么这行不通！我的清除按钮不起任何作用。这是我的全部表格/计算器。我需要“清除”按钮来清除“英尺”和“米”字段中的文本

我在做一个班级专题

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


脚：
米：

转换
清楚的

函数计算（）
{
var feets=document.getElementById（“feets”）.value；
var meters=document.getElementById（“meters”）.value；
var最终；
如果（英尺=“”&米=“”）
{
警惕（“重试”）；
返回；
}
否则，如果（！（英尺==“”）和（！（米=“”）
{
警惕（“重试”）；
返回；
}
else if（英尺==“”）
{
最终=（米*（3.28084））；
//展示！
final=final.toFixed（2）；
document.getElementById（“英尺”）。值=最终值；
}
否则如果（米==“”）
{
最终=（英尺*（.3048））；
//展示！
final=final.toFixed（2）；
document.getElementById（“米”）。值=最终值；
}
} 
//****************************************************************
函数clear（）
{   
document.getElementById（“myForm”）.reset（）；
}

为什么你必须使用JS来完成这个任务，而不是在连接到clear“button”的JS之外？我会坚持使用HTML，只需使用一个简单的表单重置

或者，在这里尝试一下：

实际问题是您正在使用此

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

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

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

将

更改为

，因为您正在查找id为

myForm

的元素，您的外部有东西，为什么不使用重置按钮呢

Clear

为什么不使用submit按钮？换句话说，你正在使用段落和按钮Close TD标记是可选的，尽管这似乎在HTML5中被省略了。@RobG说得很好，但OP有时使用它们，有时不使用，所以这表明它们忽略了要点，我只是想强调一种简单明了的形式。

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

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