Adding a clear button with HTML and JavaScript
Question
I can't figure out why this won't work! My clear button does nothing . Here is my entire form/calculator. I need the "clear" button just to get rid of the text in the "feet" and "meters" fields.
I'm working on a class project.
<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 answers
solution1
5 2013-12-12 00:06:39
The actual problem is that you are using this
document.getElementById("myForm").reset();
but your form has no ID, so you would add the ID
<form name="myForm" id="myForm">
That will work for you, but if you want to fix your code read on.
You have a few errors. Your form needs an id because you're using getElementById
There's no need to use a button to submit javascript that does what a button can do.
You have </body> then more HTML.
There's a missing </td>
<table border = "0" width = 300px> is not correct syntax (and you should really use the style attribute or a CSS file)
Also you can use a submit button and bind the function to the action of the form being submitted, which I've done here.
<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>
solution2
3 2013-12-12 00:01:48
<button type="reset" value="Reset">
Why do you have to use JS to accomplish this outside of the JS attached to the clear "button"? I would stick to HTML and just use a simple form reset.
Or, try this here: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_form_reset
solution3
1 2013-12-12 00:15:27
将<form name="myForm">更改为<form name="myForm" id="myForm">因为您正在寻找具有 id myForm的元素
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.