Javascript - Returning the value of a return function

Question

I'm working on a project right now which is primarily front end UI.

Right now i'm encountering an issue with one of my functions, in which the return value is returning the function itself and not the production of the function.

I'll first start by explaining the expected results:

1.) There is a menu on the page, when clicking on a button in the menu another menu is added to the page with it's own buttons - i'll refer to this as the sub menu.

2.) When clicking the button available in the sub menu, another menu is create and added to a list elsewhere on the page.

I'll explained the code that I have, as well as where the issue lies below:

1.) Here is where the menu button is created:

var add = document.createElement('button');

2.) Here is where I add the event listener to the button above:

closure = (function(arrayItem) 
{
    var test = function(event)
    { 
        object.spaces.push(selectedSpace.id);
        object.spaceobjects.push(selectedSpace);

        var enemyPanel = addEntityPanel(roomnumber, selectedSpace.id, object, object.savelocation, true);

        return enemyPanel ;
    };

return test;

})(arrayItem);

add.addEventListener("click", closure, false);

I used the variable closure and passed it an anonymous function for closure reasons, this way the variable arrayItem can be modified through a for loop.

You may notice the function addEntityPanel, this function creates the menu that I've been referring to and adds it to the list, it also returns an object with all of the html elements used to create the menu - storing it in the variable enemyPanel.

enemyPanel from the test function is returned to the variable test and test is returned to the variable closure which is supposed to give me access to the object enemyPanel created in the addEntityPanel function; however all that is being returned is the function itself as a string. I've tried to change:

return test;

to

return test();

But all this does is execute the function when the button in the sub menu is created. I only want it to be executed when the button is clicked.

I'm not too familiar with closure, so if there's something wrong with the closure function preventing it from generating the desired output - I would not be surprised.

I'm open to any and all suggestions. Please let me know what you guys think, thank you!

What do you want to do with enemyPanel? You can't do anything with it in closure; by the time a click occurs, closure has already returned. — T.J. Crowder
– T.J. Crowder, Commented Jun 27, 2018 at 15:24
I have a separate switch statement that takes the object being passed into addEntityPanel that takes the enemyPanel from the function and appends additional children to based on the 'type' property of the object. I can create and append the enemyPanel, but I can't append anything to the enemyPanel without access to it. - i'm running some tests now to see if there is another way for me to access the enemyPanel. — Jonathan Hinds
– Jonathan Hinds, Commented Jun 27, 2018 at 15:32
Put that logic into a function, and call that function from your event handler, passing in the panel. — T.J. Crowder
– T.J. Crowder, Commented Jun 27, 2018 at 16:14

T.J. Crowder · Accepted Answer · 2018-06-27 15:23:22Z

1

...enemyPanel from the test function is returned to the variable test...

No, it isn't. You're assigning the function itself to the variable test, not the result of calling it.

There are two issues:

You're passing the wrong function to addEventListener. It should be test, the function created by closure, not closure.
```
add.addEventListener("click", test, false);
```
You're returning enemyPanel from the event handler. The return value of an event handler added via addEventListener is completely ignored.¹ You can't return enemyPanel to anything. You can create it, assign it to a variable that's in scope for that function, add it to a list, etc., but you can't return it anywhere from within the event handler.

¹ That's a post on my anemic little blog.

edited Jun 27, 2018 at 15:23

answered Jun 27, 2018 at 15:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

1 Comment

T.J. Crowder Over a year ago

@JonathanHinds - Sorry, completely missed that bit and what you were doing with closure. Fixed.

Collectives™ on Stack Overflow

Javascript - Returning the value of a return function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related