Calculates the Distance Between Two Points X1, Y1, and X2, Y2 in Javascript

Javascript Program to calculate the distance between two points, write a javascript function distance that calculates the distance between two points (x1, y1) and (x2, y2). All numbers and return values should be floating-point values. Incorporate this function into a script that enables the user to enter the coordinates of the points through an HTML form or compute the distance between two points taking input from the user in javascript. Follow the step to get a distance between two points.

Step 1: First we create a form that can hold up to 4 values each point have 2 values x1 and y1 or x2 and y2.

Step 2: After that, we will perform some mathematics operations on those value and store the result in another variable.

Step 3: Now we have a result or distance of two points, now the next step is to display the result.

Step 4: Display the result of the two-point distance in javascript popup, and according to the question requirements we have to use float number to display a value.

As we all know that to calculate any equation e need the formula to find the result so for finding a distance of two number we are using the following formula that can help to calculate a distance between two points of two objects.

The formula of Calculating Distance between two point 

Formula to calculate a distance between two points X1, Y1, and X2, Y2

javascript code to calculate a distance between two points

Copy the code and save a file as distence.html or distence.htm. Extension should be .html or .htm both are accepted.

<!DOCTYPE html>
<title>javascript get distance between two points</title>
//Javascript script start from here.
 function find_distance()
 var x1=parseInt(document.getElementById("x1").value);
 var y1=parseInt(document.getElementById("y1").value);
 var x2=parseInt(document.getElementById("x2").value);
 var y2=parseInt(document.getElementById("y2").value);
 var distance=Math.sqrt(Math.pow((x1-x2),2)+Math.pow((y1-y2),2));
 alert("Distance: "+distance);

 <form name="f1" method="post">
 <label>Enter the co-ordinate of point p:</label><br>
 x1:<input type="text" id="x1" size="30"/>&nbsp;y1:<input type="text" id="y1" size="30"/><br>
 <label>Enter the co-ordinate of point q:</label><br>
 x2:<input type="text" id="x2" size="30"/>&nbsp;y2:<input type="text" id="y2" size="30"/><br>
 <button onclick="find_distance()">Find Distance</button>


find distance between two points in javascript
Previous Post
Next Post

post written by:

Hi, I’m Ghanendra Yadav, SEO Expert, Professional Blogger, Programmer, and UI Developer. Get a Solution of More Than 500+ Programming Problems, and Practice All Programs in C, C++, and Java Languages. Get a Competitive Website Solution also Ie. Hackerrank Solutions and Geeksforgeeks Solutions. If You Are Interested to Learn a C Programming Language and You Don't Have Experience in Any Programming, You Should Start with a C Programming Language, Read: List of Format Specifiers in C.
Follow Me