使用 HTML 和 JavaScript 添加清除按鈕
[英]Adding a clear button with HTML and JavaScript
問題描述
我不明白為什么這行不通！ 我的清除按鈕什么也不做。 這是我的整個表格/計算器。 我需要“清除”按鈕來清除“英尺”和“米”字段中的文本。
我正在做一個課堂項目。
<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>
3 個解決方案
解決方案1
5 2013-12-12 00:06:39
實際的問題是你正在使用這個
document.getElementById("myForm").reset();
但是您的表單沒有 ID，因此您需要添加 ID
<form name="myForm" id="myForm">
這對你有用，但如果你想修復你的代碼，請繼續閱讀。
你有幾個錯誤。 您的表單需要一個 id，因為您使用的是getElementById
無需使用按鈕來提交執行按鈕功能的 javascript。
你有</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>
解決方案2
3 2013-12-12 00:01:48
<button type="reset" value="Reset">
為什么必須在附加到清晰“按鈕”的 JS 之外使用 JS 來完成此操作？ 我會堅持使用 HTML，只使用簡單的表單重置。
或者，在這里試試這個： http : //www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset
解決方案3
1 2013-12-12 00:15:27
將<form name="myForm">更改為<form name="myForm" id="myForm">因為您正在尋找具有 id myForm的元素
javascript在HTML按鈕上清除asp文本框，然后單擊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.