計算兩個坐標點之間的距離

Question

以下是我的代碼，用於計算兩個坐標點之間的距離。 但是，當我運行此代碼時，無法按屏幕上指示的按鈕。 我在這里做錯了什么？ 謝謝。

<!DOCTYPE html>
<html>
    <head>
        <title>Distance Calculator</title>
            <script type="text/javascript">
            function calculateDistance(xValue1, yValue1, xValue2, yValue2)
            {
                xValue1 = parseFloat(document.getElementById('x1').value);       
                yValue1 = parseFloat(document.getElementById('y1').value);
                xValue2 = parseFloat(document.getElementById('x2').value);       
                yValue2 = parseFloat(document.getElementById('y2').value);

                var point1;
                var point2;
                var distance;

                point1 = Math.pow(xValue1 - xValue2, 2);
                point2 = Math.pow(yValue1 - yValue2, 2);

                distance = Math.sqrt(point1 + point2);

                document.getElementById('outputDiv').innerHTML = 
                'The distance between ' + xValue1 + ',' + yValue1 + 'and ' + xValue2 + ',' + yValue2 + 'is ' + distance;>
            }
            </script>
    </head>
    <body>

        <h1>Distance Calculator</h1>
            <p>
                Coordinate 1: <input type="text id=x1" size=12> , <input type="text id=y1" size=12><br>
                Coordinate 2: <input type="text id=x2" size=12> , <input type="text id=y2" size=12><br>
                <br>
                <input type="button" value="Calculate Distance"
                onclick="calculateDistance();">
            </p>
        <hr>
        <div id="outputDiv"></div>
    </body>
</html>

Answer 1

這有很多錯誤，

坐標1： <input type="text id=x1" size=12>
應該
坐標1： <input type="text" id="x1" size=12>

您的函數有4個參數，但從不使用它們，盡管這會起作用，但實踐不佳，請將其更改為函數內部聲明的vars。

  function calculateDistance() { var xValue1 = parseFloat(document.getElementById('x1').value); var yValue1 = parseFloat(document.getElementById('y1').value); var xValue2 = parseFloat(document.getElementById('x2').value); var yValue2 = parseFloat(document.getElementById('y2').value);

在結尾處也有;>}
document.getElementById('outputDiv').innerHTML = 'The distance between ' + xValue1 + ',' + yValue1 + 'and ' + xValue2 + ',' + yValue2 + 'is ' + distance;>} >是不必要的。

https://jsfiddle.net/d56ph9yr/

Answer 2

您的HTML已損壞。 該input小號已經不匹配"的之間的type和id 。你的JavaScript功能也需要4個參數，這是從來沒有設置。

我從函數中刪除了參數，並將var s添加到變量xValue1中，等等。 這是JS小提琴： https : //jsfiddle.net/10nbqweL/

Answer 3

calculateDistance采用四個參數，您不提供任何參數。

您也不要使用它們。 您可以通過getElementById獲得它們，這是該函數的第一個動作。 將它們聲明為變量，然后將其刪除為參數，您應該會很高興。

編輯：由於缺少與調用匹配的定義，當您嘗試單擊按鈕時，應該在開發人員控制台中看到javascript錯誤。

計算兩個坐標點之間的距離

問題描述

3 個解決方案

解決方案1
3 2017-04-24 00:19:52

解決方案2
1 已采納 2017-04-24 00:25:09

解決方案3
-1 2017-04-24 00:07:38

計算兩個坐標點之間的距離

問題描述

3 個解決方案

解決方案1 3 2017-04-24 00:19:52

解決方案2 1 已采納 2017-04-24 00:25:09

解決方案3 -1 2017-04-24 00:07:38

解決方案1
3 2017-04-24 00:19:52

解決方案2
1 已采納 2017-04-24 00:25:09

解決方案3
-1 2017-04-24 00:07:38