How to assign the function return value to a variable after a click for later use in javascript?

Question

So, what I want is to save the function return value on a variable for later use for example, just to save it, but after clicking, say on a button. For example, we have:

let x = 3;    
function foo(){
        let z = 5;
        z = x + 3;
        return z;
    }

Now, if I write:

let hold = foo();

it will keep the return value, but I want this to be saved on "hold" after click, by using something like this:

document.getElementById("empty_field").onclick = function() {foo()};

Here, the click calls the function, but it does not save the return value anywhere. How can I save it on a variable?

Answer 1

Short answer: You can't

Long Answer: You can leverage the concept of scope to your advantage by simply declaring hold prior to setting it's value. Here's what it would look like.

let x = 3;
let hold; //variable is declared here so the click function has access to it.    
function foo(){
        let z = 5;
        z = x + 3;
        return z;
    }

document.getElementById("empty_field").onclick = function() {
    hold = foo()
};

Longer Answer: You can access or modify hold anywhere within the scope that the variable was declared. Let's add another function where we modify hold again.

let x = 3;
let hold; //variable is declared here so the click function has access to it.    
function foo(){
        let z = 5;
        z = x + 3;
        return z;
    }

document.getElementById("empty_field").onclick = function() {
    hold = foo()
};

document.getElementById("increment").onclick = function(){
    hold++;  //this the same as hold = hold + 1
}

This is also valid because these click functions are being defined in the same scope that hold was defined in. It's good to avoid using globally scoped variables. So you may consider using a constructor and just passing the object between functions as an argument like so...

function myConstructor(){
    //initialize
    this.hold = 0
    this.foo = function(x){
        let z = 5;
        z = x + 3;
        this.hold = z;
    }
    this.increment = function(){
        this.hold++;
    }
}

let x = 3;
let myObj = new myConstructor() //I know my naming sucks just bear with me lol

document.getElementById("empty_field").onclick = function() {
    myObj.foo(x) //x is still available since it was declared globally
    console.log(myObj.hold);
};

document.getElementById("increment").onclick = function(){
    myObj.increment();
    console.log(myObj.hold);
}

Anyways that's the long and short of it. As always, there are many, many ways of doing things and there's not an absolute correct way. I just thought it might be helpful to know of a few options. More reading about constructors can be done here: https://www.w3schools.com/js/js_object_constructors.asp