UserInput 搞乱了一个函数

Question

我试图做一些东西来告诉你两个圆的交点。我放在圆心和半径的地方。 （我从 Whosebug 得到了交集函数：here）。我正在尝试添加用户输入，但是每当我将代码中的静态数字更改为用户输入（通过提示或 html 输入）时，函数就会中断并且警报会向我发送未完成的答案和 Nan .

这是到目前为止的编码（没有用户输入）：

    <html>
    <button onclick="button()">Test</button>
    <script>
    var x0 = 3;
    var y0 = 0;
    var r0 = 3;
    var x1 = -1;
    var y1 = 0;
    var r1 = 2;
    function button() {


    intersection(x0, y0, r0, x1, y1, r1)

    function intersection(x0, y0, r0, x1, y1, r1) {
    var a, dx, dy, d, h, rx, ry;
    var x2, y2;

    /* dx and dy are the vertical and horizontal distances between
     * the circle centers.
     */
    dx = x1 - x0;
    dy = y1 - y0;

    /* Determine the straight-line distance between the centers. */
    d = Math.sqrt((dy*dy) + (dx*dx));

    /* Check for solvability. */
    if (d > (r0 + r1)) {
        /* no solution. circles do not intersect. */
        return false;
    }
    if (d < Math.abs(r0 - r1)) {
        /* no solution. one circle is contained in the other */
        return false;
    }

    /* 'point 2' is the point where the line through the circle
     * intersection points crosses the line between the circle
     * centers.  
     */

    /* Determine the distance from point 0 to point 2. */
    a = ((r0*r0) - (r1*r1) + (d*d)) / (2.0 * d) ;

    /* Determine the coordinates of point 2. */
    x2 = x0 + (dx * a/d);
    y2 = y0 + (dy * a/d);

    /* Determine the distance from point 2 to either of the
     * intersection points.
     */
    h = Math.sqrt((r0*r0) - (a*a));

    /* Now determine the offsets of the intersection points from
     * point 2.
     */
    rx = -dy * (h/d);
    ry = dx * (h/d);

    /* Determine the absolute intersection points. */
    var xi = x2 + rx;
    var xi_prime = x2 - rx;
    var yi = y2 + ry;
    var yi_prime = y2 - ry;

    var list = "(" + xi + ", " + yi + ")" + "(" + xi_prime + ", " + 
    yi_prime + ")"  
    alert(list);
    }
    }  

    </script>
    </html>

当我将圆圈之外的任何变量更改为用户输入时，例如：

    var x0 = prompt("X cord of circle 1");

警报显示为：(3-2.6250, -1.4523687548277813)(NaN, 1.4523687548277813)

如果没有用户输入（显示在大代码块中），结果为：(0.375, -1.4523687548277813)(0.375, 1.4523687548277813)。这是正确答案。

谁能告诉我我做错了什么或发生了什么事？

Answer 1

你的提示 returns 一个字符串，但你不能对字符串进行数学运算。尝试将其转换为数字：

    var x0 = Number(prompt("X cord of circle 1"));

Answer 2

提示会将用户输入作为字符串。要将其转换为数学爵士乐的整数，请使用 parseInt.

 var x0String =  prompt("X cord of circle 1");
 var x0 = parseInt(x0String);

JavaScript 应该 "convert" 数字字符串为整数，如果你对它执行计算，因为 JS 是弱类型的，但这是一个很好的做法，你可以通过解析整数值来避免一些陷阱串自己。

Answer 3

正如 Daniel 所指出的，如果您需要将字符串作为数字，最好将其更改为数字。看起来真的很困惑，为什么程序不工作，直到我发现 x0 被使用了两次。

程序返回 NaN 的原因是因为在使用 + 运算符时，数字被转换为字符串而不是数字。

这发生在这里：x0 + (dx * a/d);

然后会发生一个负数被添加到字符串创建类似这样的东西：2-2

正如您所料，该值无法再转换为数字，因此当我们稍后尝试减去它时返回 NaN。

UserInput 搞乱了一个函数

UserInput Is Messing Up a Function

javascript

html

prompt