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个参数，但从不使用它们，虽然这样可行，但这种做法很糟糕，把它们改成你函数内声明的变量。

   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;>}＆gt;是不必要的。

https://jsfiddle.net/d56ph9yr/

Answer 2

您的HTML已损坏。 input在"和type之间id不匹配。您的JavaScript函数还需要4个参数，这些参数从未设置过。

我从函数中删除了参数，并将var添加到变量xValue1中，然后添加了一个。这是JS小提琴：https://jsfiddle.net/10nbqweL/

Answer 3

calculateDistance有四个参数，你不提供。

你也不能使用它们;你通过getElementById得到它们作为函数的第一个动作。将它们声明为变量并将它们作为参数删除，你应该是金色的。

编辑：当您尝试单击按钮时，您应该在开发者控制台中看到javascript错误，因为缺少与调用匹配的定义。

计算两个坐标点之间的距离

3 个答案: