Changing HTML elements with JavaScript

Question

I'm learning JavaScript and I'm trying to create a 'circle calculator' which will take user input through a form and return them the area and circumference of the circle. It all works except for displaying the result in the paragraph with the ID "circleData". It displays for a fraction of a second after submitting the form then disappears.

I would like the result of the Circle methods (the variable "text") to remain in the paragraph until the user submits the form again (when it should fill with the new data).

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

That's because `form` is submitted. Use `return false;` at the end of the `printCircle()` or `event.preventDefault()`. — Tushar, Mar 04 '16 at 03:03
@Tushar That would perfectly reasonable as an answer rather than a comment. You might want to re-submit it as an answer so we can give you more reputation points by up-voting it & maybe having it accepted. — Steve Jorgensen, Mar 04 '16 at 03:09
While the other answers are correct, this will also display your desired result, only without submitting your form and goes directly to computation: `...
Enter the radius:

Enter the units:

...` — morcen, Mar 04 '16 at 03:19

rrw · Answer 1 · 2016-03-04T03:39:35.343

Add a return false; in your function.

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;
    }

The form's onSubmit event prevents the form from submitting the data if it gets a false.

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

Alternatively, you can do it the better and most effective way.

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

And then:

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

Changing HTML elements with JavaScript

2 Answers2