使用 JavaScript 更改 HTML 元素

Changing HTML elements with JavaScript

本文关键字：元素 HTML 更改 JavaScript 使用      更新时间：2023-09-26

我正在学习JavaScript，我正在尝试创建一个"圆计算器"，它将通过表单获取用户输入并返回圆的面积和周长。除了在ID为"circleData"的段落中显示结果外，它都可以工作。提交表单后，它会显示几分之一秒，然后消失。

我希望 Circle 方法（变量"文本"）的结果保留在段落中，直到用户再次提交表单（当它应该填写新数据时）。

<!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>

在函数中添加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">

阅读更多

onsubmit="printCircle();return false;"
相关文章：