UserInput 搞砸了一个函数答案

【问题标题】：UserInput Is Messing Up a FunctionUserInput 搞砸了一个函数
【发布时间】：2015-11-06 20:24:52
【问题描述】：

我试图制作一些可以告诉你两个圆的交点的东西。我把圆心和半径放在哪里。 （我从 stackoverflow 获得了交集函数：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)。这是正确的答案。

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

【问题讨论】：

标签： javascript html prompt

【解决方案1】：

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

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

如果您对其执行计算，JavaScript 应该将数字字符串“转换”为整数，因为 JS 是弱类型的，但这是一种很好的做法，您可以通过自己从字符串中解析整数值来避免一些陷阱。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

然后会发生一个负数被添加到字符串中，创建类似：2-2

正如您可能期望的那样，该值不能再转换为数字，因此返回 NaN，当我们稍后尝试减去它时。

【讨论】：