CODEWITHSUNDEEP
javascriptfunctionobject
user1505254
user1505254

Reputation:

Javascript Object not defined after being created in a function

I can't seem to return an object from a function, the console.log inside the function prints out the property values fine but once outside the function I'm getting "Uncaught ReferenceError: firstOn is not defined"

Any help would be appreciated, thanks!

myElement = document.getElementById("testButton");

function Server(name,tables,startTime) {
    this.name = name;
    this.tables = tables;
    this.startTime = startTime;
}


document.forms.server1.button.onclick = function() {
    var name = document.forms.server1.servername.value;
    var tables = document.forms.server1.servertables.value;
    var startTime = document.forms.server1.servertime.value;

    var firstOn = new Server(name,tables,startTime);

    document.forms.server1.button.innerHTML = "Saved!";

    console.log(firstOn.name);
    console.log(firstOn.tables);
    console.log(firstOn.startTime);

    return firstOn;

};

myElement.onclick = function() {
    console.log(firstOn.name);
    console.log(firstOn.tables);
    console.log(firstOn.startTime);

};

Upvotes: 0

Views: 550

Answers (4)

Nikhil
Nikhil

Reputation: 1

var firstOn = new winMain.Server(name,tables,startTime);

Upvotes: 0

jfriend00
jfriend00

Reputation: 707436

firstOn is an object that was created and returned from the document.forms.server1.button.onclick event handler. The return value from that event handler went into the system (that's where event handlers return to) and was never stored anywhere so it was cleaned up by the system with garbage collection.

Meanwhile, your myElement.onclick event handler does NOT have access to the firstOn object because it wasn't saved anywhere that myElement.onclick can reach.

If you want firstOn to be usable after the document.forms.server1.button.onclick event handler, you have to save it somewhere that the second click handler can each. That could be in a global variable or it could be a property of some other object that is globally accessible. As your code is written right now, the firstOn object is created, but never stored anywhere so it is happily cleaned up by the garbage collector and is not reachable by other code.

Upvotes: 0

user1505254
user1505254

Reputation:

I think this is the appropriate solution to my problem. 

myElement = document.getElementById("testButton");

function Server(name,tables,startTime) {
    this.name = name;
    this.tables = tables;
    this.startTime = startTime;
}

var firstOn = new Server();

document.forms.server1.button.onclick = function() {
    firstOn.name = document.forms.server1.servername.value;
    firstOn.tables = document.forms.server1.servertables.value;
    firstOn.startTime = document.forms.server1.servertime.value;

    document.forms.server1.button.innerHTML = "Saved!";

    console.log(firstOn.name);
    console.log(firstOn.tables);
    console.log(firstOn.startTime);

    return firstOn;

};

myElement.onclick = function() {
   console.log(firstOn.name);
   console.log(firstOn.tables);
   console.log(firstOn.startTime);
};

Upvotes: 0

Mike Brant
Mike Brant

Reputation: 71384

That firstOn object was created in the local function scope. It will not be available globally in the second function.

Upvotes: 3

Related Questions