我正在学习JavaScript,我正在尝试创建一个“圆计算器”,它将通过一个表单接收用户输入,并返回圆的面积和周长。除了在ID为“circledata”的段落中显示结果外,它都正常工作。它会在提交表单后显示几秒钟,然后消失。
我希望循环方法的结果(变量“text”)保留在段落中,直到用户再次提交表单(当它应该用新数据填充时)。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Test</title>
</head>
<body>
<h1>A Circle Calculator</h1>
<form name="Circle" onsubmit="printCircle()" method="post">
Enter the radius:<br>
<input type="text" name="Radius"><br><br>
Enter the units:<br>
<input type="text" name="Units"><br><br>
<input type="submit" value="Submit"><br>
</form>
<p id="circleData"></p>
<script type="text/javascript">
var Circle = function(radius){
this.radius = radius;
}
Circle.prototype = {
get _radius(){
return this.radius;
},
get _area(){
return Math.PI * (this.radius * this.radius);
},
get _perim(){
return this.radius * (Math.PI * 2);
},
set _radius(radius){
this.radius = radius;
}
}
var aCircle = new Circle();
var printCircle = function(){
aCircle._radius = document.forms["Circle"]["Radius"].value;
var units = document.forms["Circle"]["Units"].value;
var text = "A circle with the radius of " + aCircle._radius + units + " has a circumference of " + aCircle._perim.toFixed(2) + units + " and an area of " + aCircle._area.toFixed(2) + units;
document.getElementById("circleData").innerHTML= text;
}
</script>
</body>
</html>
onsubmit="printCircle();return false;"