Question

我正在学习JavaScript，我正在尝试创建一个“圆形计算器”，它将通过表单获取用户输入并返回圆形区域和圆周。这一切都有效，除了在ID为“circleData”的段落中显示结果。它在提交表格后显示一小段时间然后消失。

我希望Circle方法的结果（变量“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>

Answer 1

在您的函数中添加return false;。

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;

      // prevent the form from its natural bahavior
      return false;
    }

表单的onSubmit事件会阻止表单在获得false时提交数据。

<form name="Circle" onsubmit="return printCircle();" method="post">

或者，你可以做得更好，更有效。

var printCircle = function(){
   event.preventDefault();
   ...
}

然后：

<form name="Circle" onsubmit="printCircle();" method="post">

使用JavaScript更改HTML元素

2 个答案: