CODEWITHSUNDEEP
javascript
Brian
Brian

Reputation: 31

Simple Javascript program: Uncaught ReferenceError: x is not defined

I am stuck on an exercise that asks to create a simple calculator. The user input is delegated to a separate function so that I may expand the program to subtraction, multiplication and division without repeating lines.

The error is:

"Uncaught ReferenceError: x is not defined"

<!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>

Upvotes: 1

Views: 23560

Answers (4)

Andrey Shchekin
Andrey Shchekin

Reputation: 21599

As other answers say, you should pass x and y from one function to another. I do not agree with the zmo's approach using array, so here is a short object option (main difference from karthikr's post is that it is shorter):

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));
}

Some additional information as requested in comments:

  1. { x: x, y: y } is an object defined using literal object notation (or object initializer).
    See Using object initializers (MDN).

  2. General form of that syntax is { property1: value1, property2: value2 /*, etc*/ }. This basically defines a map that allows you to get value1 using key property1 (similar to hashtables/dictionaries in other languages).
    So { x: x } defines an object where value of property x is equal to variable named x. This might be a bit confusing, but the property name and value are completely separate things and just happened to have the same name at this time.

  3. After the object has been defined, you can access property values by using several different approaches. Most common are object.property1 or object['property1'].
    See Objects and properties (MDN).

Btw if there is a better tutorial than MDN please let me know and I'll update the links.

Upvotes: 5

HMR
HMR

Reputation: 39270

Made some corrections to the code and added a check if both x and y are numbers.

<!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>

Upvotes: 1

TGH
TGH

Reputation: 39248

                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));
                }

Define the variables outside of the function, so that they are in scope in both methods. You can define the entire code block in a closure to avoid adding the variables to global space.

Upvotes: 1

zmo
zmo

Reputation: 24812

You're problem is that x and y are defined within the getNumbers() function's scope. A bad solution would be to declare x and y in an outer scope, or worst at global scope. A good solution is to return the values of x and y from the getNumbers function and use them afterwards:

 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));
}

Upvotes: 1

Related Questions