Friday, September 26, 2025
HomeLanguagesJavascriptHow to find the area of a triangle using JavaScript ?

How to find the area of a triangle using JavaScript ?

Given an HTML document containing input fields that hold the sides of the triangle i.e. side1, side2, and side 3. The task is to find the area of the 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 the user clicks 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 the parseInt() method on it to get the input value in numbers. And then use a simple mathematical formula to find the area of the triangle and use the document.getElementById(“display”).innerHTML to display the output on the screen.

Formula to find the Area of the Triangle:

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

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

Example: This example shows the area of triangle using Javascript.

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>
    <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>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">
        neveropen
    </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>
</body>
</html>


Output:

RELATED ARTICLES

Most Popular

Dominic
32321 POSTS0 COMMENTS
Milvus
84 POSTS0 COMMENTS
Nango Kala
6690 POSTS0 COMMENTS
Nicole Veronica
11857 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11912 POSTS0 COMMENTS
Shaida Kate Naidoo
6802 POSTS0 COMMENTS
Ted Musemwa
7073 POSTS0 COMMENTS
Thapelo Manthata
6761 POSTS0 COMMENTS
Umr Jansen
6768 POSTS0 COMMENTS