How to find the area of a triangle using JavaScript ?

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
<!DOCTYPE HTML><html>  <head>    <meta http-equiv="Content-Type"         content="text/html; charset=utf-8">      <title>        JavaScript function to find         the area of a triangle    </title></head>  <body style="text-align: center;">    <h1 style="color: green;">        GeeksforGeeks    </h1>      <h4>        JavaScript function to find         the area of a triangle    </h4>      <label for="side1">        Enter the value of side 1:     </label>          <input type="number" id="side1"         placeholder="Enter value of side 1">    <br><br>      <label for="side2">        Enter the value of side 2:     </label>          <input type="number" id="side2"         placeholder="Enter value of side 2">    <br><br>      <label for="side3">        Enter the value of side 3:     </label>          <input type="number" id="side3"         placeholder="Enter value of side 2">    <br><br>      <button onclick="Area()">Click Here!</button>      <p>        Area of Triangle: <span id="display"></span>    </p>      <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;        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS