2019-05-07
Calculate triangle area and circumference from user input sides
stackoverflow
Question

I am trying to write a program that calculates the area and the circumference of a triangle from the user's input. (They're supposed to input the sides).

This is all I have and for some reason (which I can't understand well enough to look up), it's not working.

``````<html>
<title>Triangle's Area & Perimeter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">

function Triangle(side1,side2,side3){

this.side1 = side1;
this.side2 = side2;
this.side3 = side3;

this.getArea = function(){
return s = (this.side1 + this.side2 + this.side3)/2;
area = squareRoot(s * (s-side1) * (s-side2) * (s-side3));
};

this.getPerimeter = function(){
return side1 + side2 + side3;
};

this.toString = function(){
return "The Triangle with sides = " + this.side1 + this.side2 + this.side3 + " has Area = " + this.getArea() + " and Perimeter = " + this.getPerimeter();
};
}

function calculate(){

var s = parseFloat(document.getElementById('side1','side2','side3').value);

if(isNaN(s)){
document.getElementById('data').innerHTML = "Please  enter numbers only";
return;
}

if(s<=0){
document.getElementById('data').innerHTML = "Negative  numbers and Zero don't   make   sense";
return;
}

var myTriangle = new Triangle();

document.getElementById('data').innerHTML = myTriangle.toString();

}
</script>
<body>

<h3>Program Calculates Area and Perimeter of Triangles</h3>
<p>Enter the side1: <input type="text" id="side1" value="" />
<p>Enter the side2: <input type="text" id="side2" value="" />
<p>Enter the side3: <input type="text" id="side3" value="" />
<input type="button"  value="Calculate"  onClick="calculate()" /></p>

<p id="data"></p>
</body>
``````

1

There are a couple of minor mistakes here, so let's start. First, let's have a look at the input:

``````var s = parseFloat(document.getElementById('side1','side2','side3').value);
``````

We need to know the three different sides in all our calculations, so let's retrieve the inputs separately:

``````var s1 = parseFloat(document.getElementById('side1')
, s2 = parseFloat(document.getElementById('side2')
, s3 = parseFloat(document.getElementById('side3');
``````

Next we will need to run your validations on all three numbers, changing the following conditionals to:

``````if(isNaN(s1) || isNaN(s2) || isNaN(s3))
``````

... and ...

``````if(s1<=0 || s2<=0 || s3<=0)
``````

Finally we'll need to pass all the values to our `Triangle` constructor:

``````var myTriangle = new Triangle(s1, s2, s3);
``````

Next, let's have a look at our `Triangle` object. The `getPerimeter()` function works well, so no need to touch that. To get the area of a triangle from its sides we can use Heron's formula, which you've attempted. Here's a working implementation using our already defined `getPerimeter()` function:

``````this.getArea = function(){
var p = this.getPerimeter() / 2;
return Math.sqrt(p * (p - side1) * (p - side2) * (p - side3));
};
``````

Here is a working JSFiddle with all the fixes. Note that I did some other clean-ups as well, like cache the DOM nodes. (You'll need to put the JavaScript code within `<script>` tags at the end of your `<body>` element for it to work.)

Calculate triangle area and circumference from user input sides
Related Questions
Related Documents