Online Ethical Hacking Course

Apply Now

Examples

JavaScript Program to Calculate the Area of a Triangle (3 Ways)

Calculating the area of a triangle is an easy math task that can be quickly done with JavaScript. Whether you use fixed values, take inputs from users, or create a web form, JavaScript provides simple and flexible ways to solve the problem. In this guide, we will look at several methods to write a JavaScript program to calculate the area of a triangle, with detailed examples, step-by-step instructions, and outputs.

Introduction to Calculating the Area of a Triangle in JavaScript

The area of a triangle can be calculated using the formula:

Area = (Base × Height) / 2

Alternatively, if the lengths of all three sides are known, you can use Heron’s formula:

Area = √(s × (s – a) × (s – b) × (s – c))

where s is the semi-perimeter of the triangle:

s = (a + b + c) / 2

Let’s explore how to find the area of a triangle in JavaScript using these methods.

JavaScript Program to Calculate the Area of a Triangle Using Base and Height

The simplest way to calculate the area of a triangle is by using its base and height.

Code

// JavaScript program to calculate the area of a triangle using base and height
let base = 10;
let height = 5;
let area = (base * height) / 2;
console.log("The area of the triangle is: " + area);

Output

The area of the triangle is: 25

Explanation

The base and height values are multiplied and divided by 2 to compute the area. This method works for all right-angled and general triangles where the height is known.

JavaScript Program to Calculate the Area of a Triangle Using User Input

This method allows the user to input the base and height values interactively.

Code

// JavaScript area of triangle with user input
let base = parseFloat(prompt("Enter the base of the triangle:"));
let height = parseFloat(prompt("Enter the height of the triangle:"));
let area = (base * height) / 2;
alert("The area of the triangle is: " + area);

Output

The program prompts the user for inputs and displays the result in an alert box.

Explanation

The prompt() function takes user input for the base and height, which is then converted to a number using parseFloat(). The area is calculated and displayed in an alert box.

JavaScript Program to Calculate the Area of a Triangle Using Heron’s Formula

If the lengths of all three sides are known, Heron’s formula can be used to calculate the area.

Code

// JavaScript code to calculate area of triangle using Heron's formula
let a = 5;
let b = 6;
let c = 7;
let s = (a + b + c) / 2; // Semi-perimeter
let area = Math.sqrt(s * (s - a) * (s - b) * (s - c));
console.log("The area of the triangle is: " + area);

Output

The area of the triangle is: 14.696938456699069

Explanation

The semi-perimeter s is calculated first. The area is then computed using Heron’s formula and Math.sqrt() for the square root.

JavaScript Program to Calculate the Area of a Triangle Using HTML Form for Interactive Input

Here’s how to calculate the area of a triangle in JavaScript using an HTML form.

Code

<!DOCTYPE html>
<html>
<body>
    <h3>Calculate the Area of a Triangle</h3>
    <form>
        <label for="base">Base:</label>
        <input type="text" id="base"><br><br>
        <label for="height">Height:</label>
        <input type="text" id="height"><br><br>
        <button type="button" onclick="calculateArea()">Calculate</button>
    </form>
    <p id="result"></p>

    <script>
        function calculateArea() {
            let base = parseFloat(document.getElementById("base").value);
            let height = parseFloat(document.getElementById("height").value);
            if (base > 0 && height > 0) {
                let area = (base * height) / 2;
                document.getElementById("result").innerHTML = "The area of the triangle is: " + area;
            } else {
                document.getElementById("result").innerHTML = "Please enter positive values for base and height.";
            }
        }
    </script>
</body>
</html>

Output

The result is displayed on the webpage after clicking the button.

Explanation

The calculateArea function retrieves input values from the form, calculates the area, and displays the result in a paragraph element. Input validation ensures only positive values are accepted.