提问者:小点点

使用JavaScript更改HTML元素[重复]


我正在学习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>

共1个答案

匿名用户

onsubmit="printCircle();return false;"

相关问题