Related Articles

# How to find the area of a triangle using JavaScript ?

• Last Updated : 29 Jan, 2021

Given an HTML document containing input fields that holds the side of triangle i.e. side1, side2, and side 3. The task is to find the area of triangle using JavaScript.

Approach: First we will create three input fields using <input type=”number”> tag to holds number input. After filling the input value, when user click the button, then the JavaScript function Area() will be called.

In JavaScript function, we use document.getElementById(“side1”).value to get the input value and then apply parseInt() method on it to get the input value in number. And then use simple mathematical formula to find the area of triangle and use document.getElementById(“display”).innerHTML to display the output on the screen.

Formula to find the Area of Triangle:

```var s = (side1 + side2 + side3) / 2;

var area = Math.sqrt(s * ((s - side1) * (s - side2) * (s - side3)));```

Example:

## HTML

 ```<``html``>`` ` `<``head``>``    ``<``meta` `http-equiv``=``"Content-Type"` `        ``content``=``"text/html; charset=utf-8"``>`` ` `    ``<``title``>``        ``JavaScript function to find ``        ``the area of a triangle``    `````` ` `<``body` `style``=``"text-align: center;"``>``    ``<``h1` `style``=``"color: green;"``>``        ``GeeksforGeeks``    ```` ` `    ``<``h4``>``        ``JavaScript function to find ``        ``the area of a triangle``    ```` ` `    ``<``label` `for``=``"side1"``>``        ``Enter the value of side 1: ``    ````     ` `    ``<``input` `type``=``"number"` `id``=``"side1"` `        ``placeholder``=``"Enter value of side 1"``>``    ``<``br``><``br``>`` ` `    ``<``label` `for``=``"side2"``>``        ``Enter the value of side 2: ``    ````     ` `    ``<``input` `type``=``"number"` `id``=``"side2"` `        ``placeholder``=``"Enter value of side 2"``>``    ``<``br``><``br``>`` ` `    ``<``label` `for``=``"side3"``>``        ``Enter the value of side 3: ``    ````     ` `    ``<``input` `type``=``"number"` `id``=``"side3"` `        ``placeholder``=``"Enter value of side 2"``>``    ``<``br``><``br``>`` ` `    ``<``button` `onclick``=``"Area()"``>Click Here!`` ` `    ``<``p``>``        ``Area of Triangle: <``span` `id``=``"display"``>``    ```` ` `    ``<``script` `type``=``"text/javascript"``>``        ``function Area() {``            ``var side1 = parseInt(document``                ``.getElementById("side1").value);`` ` `            ``var side2 = parseInt(document``                ``.getElementById("side2").value);`` ` `            ``var side3 = parseInt(document``                ``.getElementById("side3").value);`` ` `            ``console.log(typeof(side1));``            ``var s = (side1 + side2 + side3) / 2;`` ` `            ``var area = Math.sqrt(s * ((s - side1) ``                    ``* (s - side2) * (s - side3)));`` ` `            ``document.getElementById(``                ``"display").innerHTML = area;``        ``}``    `````` ` ``

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up