Question

我一直在试图弄清楚如何创建一个距离计算器。我认为公式是正确的，但我的问题是我的变量不会运行公式甚至显示在我的输出中。

<!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>

Answer 1

发布更正的代码。

在编写前端代码时，始终有一种调试代码的好方法。浏览器。了解如何使用浏览器控制台。

<!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>

我是如何调试它的？

使用F12 ...然后我查看了控制台，检查有额外+的行中是否有错误。

所以我改变了它。

然后我看到了关于parseFloat的抱怨。然后我检查了refernce，发现有一种名为parseFloat而不是parsefloat`的方法。

然后我看到没有出水，没有错误。是什么让我再次检查代码，显示在将结果分配给innerHTML之前有返回语句......

这就是我调试它的方式。

你应该学习： -


如何使用chrome调试器。

当您遇到内置功能或对内置功能有疑问时，请检查手册。

了解更多javascript和basi控制流程。

Answer 2

代码中存在一些与拼写错误/语法相关的问题，以及函数中的返回，导致无法访问打印行。

当函数名称为str1 <- c("May 16,2017", "16/05/2017")时，您有parsefloat个来电。还有一个concat运算符，没有任何内容可以跟parseFloat。

以下是更新代码段：

distance +

    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;
        }

Answer 3

在发布问题之前运行您的代码。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

（HTML / Javascript） - 两点之间的距离计算器

3 个答案:

我是如何调试它的？