Question

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

};

Answer 1

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.