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>
<head>
<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>
</head>
<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>
```

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.)

- How to invert a matrix in JavaScript
- SELECT border in Chrome renders 3D
- Why doesn't nth-of-type/nth-child work on nested elements?
- How to implement Promise.race() with async/await
- How do I return the response from an asynchronous call?
- Dynamically include array object variables in the HTML in Angular
- How to create an array of objects in JavaScript?
- How to get selected month in jQuery full calendar?
- I have problem with bootstrap buttons when resizing browser
- What if Chrome dev tools mobile not real?