Calculate triangle area and circumference from user input sides

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

score 0 · Answer 1 · answered Oct 25 '15 at 11:41

you can't do this:

document.getElementById('side1','side2','side3');

you'll need to make separate variables:

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

and then pass those variables as arguments to your Triangle function

Drenmi · Accepted Answer · 2019-04-18T02:56:10.333

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

Perfect! Had to spend some time trying to understand why the code wouldn't work if I put the — Monique, Oct 27 '15 at 13:21
That's because the script relies on the elements inside your `body` to be there before running. :-) — Drenmi, Oct 27 '15 at 14:25
@Drenmi This is obviously wrong. You need `var p = this.getPerimeter()/2;` as specified in your link. Do a quick sanity check: take a right triangle whose sides are 3,4 and 5. We know that the area is 1/2*height*base. This gives us 1/2*3*4=6. In your script we get an area of ~77.8 which is wrong. — mechanicious, Apr 17 '19 at 17:04
Ah. Looks like you're right @Bright. I updated the code example. Thanks! — Drenmi, Apr 18 '19 at 02:56

Calculate triangle area and circumference from user input sides

2 Answers2

Linked