Question

在处理包含一些javascript代码的html代码的同时，我看到程序运行但是快速提供所需的结果然后在一个时刻擦除它们（我认为问题不是根植于javascript代码）。我需要的是在屏幕上暂停这些结果，而不是删除它们。这是代码：

<html>
<head>
 <title>Geometric operations</title>
 <script>
      function Calculate(){
          var radius=document.forms["form1"]["radius"].value;
          if (radius==null || radius=="" || isNaN(radius)){
              alert("Please give the radius of the circle");
   return false;
   }
    var radius = parseInt(document.getElementById("radius").value,5);
    var perimeter = (2 * radius * Math.PI);
    var embadon = (radius * radius * Math.PI);

    document.getElementById("perimeter").value = perimeter;
    document.getElementById("embadon").value = embadon;
 }
 </script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius   : <input type="text" id="radius" size=5> m<br>
Circle perimeter  : <input type="text" id='perimeter' size=5> m <br>
Circle area   : <input type="text" id='embadon' size=5> m^2<br>
<input type="submit" name="submit" value="Calculation"   onclick="Calculate()">  
</pre></form>
</body>
</html>

提前感谢任何帮助或洞察为何会发生这种情况。

Answer 1

您运行以发送表单并执行该函数。发送该功能并刷新页面。将按钮type="submit"的类型更改为type="button"并在功能中添加return false;。

<html>
<head>
 <title>Geometric operations</title>
 <script>
      function Calculate(){
          var radius=document.forms["form1"]["radius"].value;
          if (radius==null || radius=="" || isNaN(radius)){
              alert("Please give the radius of the circle");
   return false;
   }
    var radius = parseInt(document.getElementById("radius").value,5);
    var perimeter = (2 * radius * Math.PI);
    var embadon = (radius * radius * Math.PI);

    document.getElementById("perimeter").value = perimeter;
    document.getElementById("embadon").value = embadon;
    return false;
 }
 </script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius   : <input type="text" id="radius" size=5> m<br>
Circle perimeter  : <input type="text" id='perimeter' size=5> m <br>
Circle area   : <input type="text" id='embadon' size=5> m^2<br>
<input type="button" name="submit" value="Calculation"   onclick="Calculate()">  
</pre></form>
</body>
</html>

Answer 2

这是：

<html>
<head>
<title>Geometric operations</title>
<script>
  function Calculate(){
      var radius=document.forms["form1"]["radius"].value;
      if (radius==null || radius=="" || isNaN(radius)){
          alert("Please give the radius of the circle");
return false;
}
var num=2;
var PI=3.14159;
var radius=document.forms["form1"]["radius"].value;
var perimeter = ((num) * (radius) * (PI));
var embadon = ((radius) * (radius) * (PI));

document.getElementById("perimeter").value = perimeter;
document.getElementById("embadon").value = embadon;
return false;
}
</script>
</head>
<body>
<h1>Calculation of circle perimeter and circle area</h1>
To calculate the circle perimeter and circle area you need to give the 
radius and then press the button<b>"Calculation"</b><br>
<form name="form1" action="" method="" onSubmit="return Calculate()">
<pre>
Circle radius   : <input type="text" id="radius" size=5> m<br>
Circle perimeter  : <input type="text" id='perimeter' size=5> m <br>
Circle area   : <input type="text" id='embadon' size=5> m^2<br> 
<input type="button" name="SUBMIT" value="Calculation"onclick="Calculate()">  
 </pre></form>
 </body>
 </html>

太快导致包含javascript代码的html

2 个答案: