CODEWITHSUNDEEP
javascripthtml
Mason Boroff
Mason Boroff

Reputation: 13

(HTML/Javascript) - Distance Calculator between two points

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>

Upvotes: 0

Views: 4036

Answers (2)

jgatjens
jgatjens

Reputation: 688

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>

Upvotes: -1

user2736738
user2736738

Reputation: 30916

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.

Upvotes: 2

Related Questions