(HTML/Javascript) - Distance Calculator between two points

Question

I have been attempting to figure out how to create a distance calculator. I think the formula is correct, but my issue is that my variables will not run through the formula or even display in my output.

<!doctype html>
<!-- distance.html                     Mason Boroff -->
<!-- =================================================== -->
<html>
<head>
    <title> Distance Calculator </title>

    <script type="text/javascript">
    function ShowDistance()
        {
        var x1, x2, y1, y2;
            x1=parsefloat(document.getElementById('xOne').value);
            x2=parsefloat(document.getElementById('xTwo').value);
            y1=parsefloat(document.getElementById('yOne').value);
            y2=parsefloat(document.getElementById('yTwo').value);

        var distance = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-
y2), 2) );
        return distance;

            document.getElementById('outPut').innerHTML=
                 'The distance bewtween (' + x1 + ',' + y1 + ') and (' 
+ x2 + ',' + y2 + ') is '+ distance +;
        }
    </script>
</head>

<body>
    <h2>Distance Calculator</h2>
    <p>
        Coordinate 1: (<input type="text" id="xOne" size=12 value=''> , 
<input type="text" id="yOne" size=12 value=''>)
        <br>
        Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> , 
<input type="text" id="yTwo" size=12 value=''>)

        <br>
        <br>
        <input type="button" onclick="ShowDistance()" value="Calculate 
Distance";>
    </p>
    <hr>
    <div id="outPut"> </div>
</body>

You return before printing out your output. So the line document.getElementById('outPut').innerHTML= will never execute, run it infront of the return. — Doomenik
– Doomenik, Commented Oct 19, 2017 at 6:02
parseFloat and + after distance while setting innerHTML — user3880179
– user3880179, Commented Oct 19, 2017 at 6:05

user2736738 · Accepted Answer · 2017-10-19 06:10:33Z

2

Posting the corrected code.

There is always a good way to debug your code when writing front end code. The browser. Learn how to use browser console.

<!doctype html>
<!-- distance.html                     Mason Boroff -->
<!-- =================================================== -->
<html>
<head>
    <title> Distance Calculator </title>

    <script type="text/javascript">
    function ShowDistance()
        {
        var x1, x2, y1, y2;
            x1=parseFloat(document.getElementById('xOne').value);
            x2=parseFloat(document.getElementById('xTwo').value);
            y1=parseFloat(document.getElementById('yOne').value);
            y2=parseFloat(document.getElementById('yTwo').value);


        var distance = Math.sqrt( Math.pow((x1-x2), 2) + Math.pow((y1-
y2), 2) );


            document.getElementById('outPut').innerHTML=
                 'The distance bewtween (' + x1 + ',' + y1 + ') and (' 
+ x2 + ',' + y2 + ') is '+ distance ;
 return distance;
        }
    </script>
</head>

<body>
    <h2>Distance Calculator</h2>
    <p>
        Coordinate 1: (<input type="text" id="xOne" size=12 value=''> , 
<input type="text" id="yOne" size=12 value=''>)
        <br>
        Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> , 
<input type="text" id="yTwo" size=12 value=''>)

        <br>
        <br>
        <input type="button" onclick="ShowDistance()" value="Calculate 
Distance">
    </p>
    <hr>
    <div id="outPut"> </div>
</body>

How I debugged it?

USe F12...then I looked into the console to check that there is an error in the line having extra +.

So I changed it.

Then I saw the complaign about parseFloat. Then I checked refernce to find out there is an method called parseFloat not parsefloat`.

Then I saw no outpout and no error. WHich made me check code again which revealed that there is return statement before you assign the result to innerHTML...

That's how I debugged it.

You should learn :-

How to use chrome debugger.

Checking the manual when you get stuck or in doubt about built in functions.

Learn a bit more javascript and basi control flow of programs.

edited Oct 19, 2017 at 6:10

answered Oct 19, 2017 at 6:06

user2736738

31k5 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Doomenik Over a year ago

<input type="button" onclick="ShowDistance()" value="Calculate Distance";> there is also an error the ;behind is unecessary remove it pls

user2736738 Over a year ago

@Doomenik.: Yes I checked it.

jgatjens · Accepted Answer · 2017-10-19 06:15:37Z

Run your code before posting a question.

function showDistance() {
  var x1 = (parseInt(document.getElementById('xOne').value)).toFixed(4);
  var x2 = (parseInt(document.getElementById('xTwo').value)).toFixed(4);
  var y1 = (parseInt(document.getElementById('yOne').value)).toFixed(4);
  var y2 = (parseInt(document.getElementById('yTwo').value)).toFixed(4);

  var distance = Math.sqrt( Math.pow((x1-x2), 2) + 
                 Math.pow((y1-y2), 2) );
       
  document.getElementById('outPut')
    .innerHTML= 'The distance bewtween (' + 
      x1 + ',' + y1 + ')  and (' + 
      x2 + ',' + y2 + ') is '+ distance;

    return distance;
}

<h2>Distance Calculator</h2>
<p>
Coordinate 1: (<input type="text" id="xOne" size=12 value=''> , 
<input type="text" id="yOne" size=12 value=''>)
<br>
Coordinate 2: (<input type="text" id="xTwo" size=12 value=''> , 
<input type="text" id="yTwo" size=12 value=''>)
<br>
<input type="button" onclick="showDistance()" value="Calculate 
Distance";>
</p>
<hr>
<div id="outPut"> </div>

Collectives™ on Stack Overflow

(HTML/Javascript) - Distance Calculator between two points

2 Answers 2

How I debugged it?

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How I debugged it?

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related