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
– Aaron Angle, Commented Jul 6, 2020 at 19:46

Quentin · Accepted Answer · 2020-07-06 19:46:20Z

1

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?

answered Jul 6, 2020 at 19:46

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hawks Over a year ago

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 Over a year ago

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?

Štěpán Stenchlák · Accepted Answer · 2020-07-06 19:55:09Z

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 6, 2020 at 19:55

Štěpán Stenchlák

811 silver badge4 bronze badges

4 Comments

hawks Over a year ago

Is this any different to what was suggest by @Quentin, I am unsure hence why i am asking

Štěpán Stenchlák Over a year ago

@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 <script> will be executed only once, during the loading, and after that, only code in function can be executed. Therefore it makes sense to put it in the function if you wait for user.

hawks Over a year ago

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

Štěpán Stenchlák Over a year ago

@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.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related