How do I access the output of JavaScript function outside the function?

Question

Been stuck on this for a while now and it is really annoying me. I have a form in HTML that lets the user enter some text, I then created a function in my script to take that text when the user presses submit. The function works fine as it takes the input and stores it in input (i console logged it and it was right). My issue is that i want to take that input and use it outside the function to produce graphs in d3 by filtering using that text that the user input.

I have tried using the code below but it doesn't work, when logging user it says its undefined and hence i cant use it further could some please help.

    var user;
    function othername(){
        var input = document.getElementById("user_name").value;
        console.log(input);
        user = input;
    }
    console.log(user)
</script>

Are you invoking your function? I'm assuming you are because you said that it was working in the console but I don't see you calling it in your code so I just thought I would throw it out there. Also you could just use a return statement in your code so instead of user = input you could do return input. Then when you call your function it would be equal to that input value because that is what it is returning — Aaron Angle, Jul 06 '20 at 19:46

score 1 · Answer 1 · answered Jul 06 '20 at 19:46

You have to call the function before it has any effect:

var user;
function othername(){
    var input = document.getElementById("user_name").value;
    console.log(input);
    user = input;
}
othername();
console.log(user)

However, globals are dangerous. Use return values instead.

var user;
function othername(){
    var input = document.getElementById("user_name").value;
    console.log(input);
    return input;
}
user = othername();
console.log(user)

However, since you are reading from an input, you probably don't want to call it until some event happens (such as a button being clicked) so the user has a chance to type something into the input first.

In which case you have just reached the territory of How do I return the response from an asynchronous call?

with the second solution you suggested does that mean i can call user within my d3 code below and it will return the value that was entered by the user? I will have a look into the link you sent me, i am just trying to get a crude version working before refining. @Quentin — hawks, Jul 06 '20 at 19:55
are you suggesting that i need to make the function an asynchronous function? if so what would that mean? that i want call the function until the user has actually typed something and pressed submit? — hawks, Jul 06 '20 at 20:07

score 0 · Accepted Answer · answered Jul 06 '20 at 19:55

0

The code you provided does:

Declares user variable.
Declares function which uses the variable, but the function is not yet executed.
Immediatelly prints the variable user, which is still undefined because the function wasn't called yet.

If you want to log user variable later, you need to wrap it in the function for example. Then, when you call the wrapper function, it logs the value as you expect.

var user;
function othername(){
    var input = document.getElementById("user_name").value;
    console.log(input);
    user = input;
}
function logUserValue(){
    console.log(user);
}

answered Jul 06 '20 at 19:55

Štěpán Stenchlák

81
1
3

Is this any different to what was suggest by @Quentin, I am unsure hence why i am asking – hawks Jul 06 '20 at 19:59
@hawks Yes, Quentin suggest a slightly different approach. I've re-read your question and the best for you would be to insert the d3 code inside the function. When user presses submit button, you want to obtain the value and do something (after pressing the button) with d3. Or you can create a function `doTheD3Thing(user)` which will be called from `othername` function. Just keep in mind that code inside ` – Štěpán Stenchlák Jul 06 '20 at 20:23
you mean putting my d3 code in the othername() method? I will keep the script thing in mind, and attempt to fix it tomorrow thank you for the suggestions – hawks Jul 06 '20 at 20:58
@hawks correct. You want to run d3 code when user clicks on the button, therefore the code should be inside the function or in another function which is called from `othername`. – Štěpán Stenchlák Jul 06 '20 at 21:15

How do I access the output of JavaScript function outside the function?

2 Answers2