Question

我被困在一项要求创建简单计算器的练习上。用户输入被委托给一个单独的函数，这样我就可以将程序扩展为减法，乘法和除法而不重复行。

错误是：

“未捕获的ReferenceError：x未定义”

<!DOCTYPE HTML>
<html>
    <head>
        <title>Lesson 6 Lab Exercise 3 - Calculator with user input</title>
            <script language="javascript" type="text/javascript">
                function getNumbers()
                {
                    var x = prompt("Enter the first number:");
                    var y = prompt("Enter the second number:");
                    x = parseInt(x);
                    y = parseInt(y);
                }

                function addition()
                {
                    getNumbers();   
                    document.write(x + "+" + y + "=" + (x+y));
                }
            </script>
    </head>
    <body>
        <input type="button" value="Add" onclick="addition()">
    </body>
</html>

Answer 1

正如其他答案所说，您应该将x和y从一个功能传递到另一个功能。我不同意使用数组的zmo方法，所以这里有一个简短的对象选项（与karthikr的帖子的主要区别在于它更短）：

function getNumbers()
{
    var x = prompt("Enter the first number:");
    var y = prompt("Enter the second number:");
    x = parseInt(x);
    y = parseInt(y);
    return { x: x, y: y };
}

function addition()
{
    var numbers = getNumbers();   
    document.write(numbers.x + "+" + numbers.y + "=" + (numbers.x+numbers.y));
}

评论中要求的一些其他信息：

{ x: x, y: y }是使用文字对象表示法（或对象初始值设定项）定义的对象请参阅Using object initializers (MDN)。
该语法的一般形式为{ property1: value1, property2: value2 /*, etc*/ }。这基本上定义了一个地图，允许您使用键value1获取property1（类似于其他语言中的哈希表/词典）。
因此{ x: x }定义了一个对象，其中属性x的值等于名为x的变量。这可能有点令人困惑，但属性名称和值是完全不同的东西，而且恰好在这个时候具有相同的名称。
定义对象后，可以使用多种不同方法访问属性值。最常见的是object.property1或object['property1'] 见Objects and properties (MDN)。

顺便说一句，如果有比MDN更好的教程，请告诉我，我会更新链接。

Answer 2

                var x;
                var y;
                function getNumbers()
                {
                    x = prompt("Enter the first number:");
                    y = prompt("Enter the second number:");
                    x = parseInt(x);
                    y = parseInt(y);
                }

                function addition()
                {
                    getNumbers();   
                    document.write(x + "+" + y + "=" + (x+y));
                }

定义函数外部的变量，以便它们在两个方法的范围内。您可以在闭包中定义整个代码块，以避免将变量添加到全局空间。

Answer 3

对代码进行了一些更正，并添加了一个检查x和y是否为数字。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Lesson 6 Lab Exercise 3 - Calculator with user input</title>
            <script language="javascript" type="text/javascript">
              var Calculator={
                x:0,
                y:0,
                getNumbers:function()
                {
                    // reset x and y
                    this.x=NaN;
                    this.y=NaN;
                    while(isNaN(this.x)){
                      this.x = prompt("Enter the first number:");
                      this.x = parseFloat(this.x);
                    }
                    while(isNaN(this.y)){
                      this.y = prompt("Enter the second number:");
                      this.y = parseFloat(this.y);
                    }
                },
                addition:function()
                {
                    this.getNumbers();   
                    document.write(this.x + "+" + this.y + "=" + (this.x+this.y));
                }
              }
            </script>
    </head>
    <body>
        <input type="button" value="Add" onclick="Calculator.addition()">
    </body>
</html>

Answer 4

问题在于x和y是在getNumbers()函数的范围内定义的。一个糟糕的解决方案是在外部范围内声明x和y，或在全局范围内声明最差。一个好的解决方案是从x函数返回y和getNumbers的值，然后再使用它们：

 function getNumbers() {
     var x = prompt("Enter the first number:");
     var y = prompt("Enter the second number:");
     x = parseInt(x);
     y = parseInt(y);
     return [x, y];
}

function addition(){
    var [x, y] = getNumbers();   
    document.write(x + "+" + y + "=" + (x+y));
}

简单的Javascript程序：未捕获的ReferenceError：x未定义

4 个答案: