calculate distance between two points using javascript & html form

Question

I'm kind of stuck cause whenever I click the Calculate Distance button after entering numbers for x1,x2,y1,y2 everything clears instead of calculating

 function calculateDistance()
            {
                var pointx1 = parseInt(document.getElementById("pointx1").value);
                var pointy1 = parseInt(document.getElementById("pointy1").value);
                var pointx2 = parseInt(document.getElementById("pointx2").value);
                var pointy2 = parseInt(document.getElementByID("pointy2").value);
          
                var distance = Math.sqrt(Math.Pow((pointx1-pointx2),2)+Math.Pow((pointy1-pointy2),2));

                window.alert("Distance: "+distance);

            }

<!DOCTYPE html>
<html> 
    <head>
        <meta charset = "utf-8">
        <title> Distant Points </title>
    <script type = "text/javascript"> </script>
        </head>
            <body>
                <form name = "f1" method="post">
                    <label>Point 1:</label><br>
                    x:<input type = "text" id = "pointx1" size = "30"/> &nbsp; y1:<input type = "text" id = "pointy1" size = "30"/> <br>
                    <label>Point 2:</label> <br>
                    x:<input type = "text" id = "pointx2" size = "30"/> &nbsp; y2:<input type = "text" id = "pointy2" size = "30"/>
                    <button onclick = "calculateDistance()">Calculate Distance</button>
             </form>
        </body>
</html>

Did you notice that you misspelled the last `getElementByID`? Also, use `type="button"` on your ` — Sebastian Simon, Mar 25 '18 at 23:42
`document.getElementByID()` should be `document.getElementById()`. Also `Math.Pow()` should be `Math.pow()`. in both instances. You'll also probably want to prevent default form submission. — Obsidian Age, Mar 25 '18 at 23:43

score 2 · Accepted Answer · answered Mar 25 '18 at 23:44

The reason is because you have several typos, and you are using a form.

First the typos:

It's document.getElementById not document.getElementByID secondly, it's Math.pow not Math.Pow

Since the button is within a form, you will also want to return false to prevent default form submission which will interfere with your code.

function calculateDistance() {
  var pointx1 = parseInt(document.getElementById("pointx1").value);
  var pointy1 = parseInt(document.getElementById("pointy1").value);
  var pointx2 = parseInt(document.getElementById("pointx2").value);
  var pointy2 = parseInt(document.getElementById("pointy2").value);

  var distance = Math.sqrt(Math.pow((pointx1-pointx2),2)+Math.pow((pointy1-pointy2),2));

  window.alert("Distance: "+distance);
}

<form name = "f1" method="post">
  <label>Point 1:</label><br>
  x:<input type = "text" id = "pointx1" size = "30"/> &nbsp; y1:<input type = "text" id = "pointy1" size = "30"/> 
  <br>
  <label>Point 2:</label> <br>
  x:<input type = "text" id = "pointx2" size = "30"/> &nbsp; y2:<input type = "text" id = "pointy2" size = "30"/>
  <button onclick = "calculateDistance(); return false;">Calculate Distance</button>
</form>

calculate distance between two points using javascript & html form

1 Answers1