Question: I'm trying to update the array with values once the user clicks on an element in the DOM. The elements seem to be pushed into the array inside the anonymous function but outside the function the array is still empty. How can I fix that? Here is the javascript code:

```
function getSelection() {
    var selections = [];

    var container = document.getElementById("main-container");
    var choices = document.querySelectorAll('li');

    choicesLength = choices.length;

    for(var i = 0; i < choicesLength; i++) {

        choices[i].addEventListener("click", function(){
            var position = this.getAttribute("value");
            selections.push(position);
            // logs array and updates with each click 
            console.log(selections);
        });
    }       

    // logs empty array
    console.log(selections);

}

```

Basically, after the items are clicked, the main array needs to be updated with what they clicked. 

Any help would be appreciated. 

Thanks

Answer: 
The function you pass to `addEventListener` won't run until the event happens.

It isn't possible for you to click any of the list items before the `console.log` that runs immediately after the assignment fires.

> 
> Basically, after the items are clicked, the main array needs to be updated with what they clicked.
> 
> 
> 

… and that is what will happen. Look at the results of the `console.log` inside the click handler.
Adding to my comment, I think closures can solve this problem pretty efficiently.

I haven't tested the following code:

```
function getSelection() {
this.selections = [];

var container = document.getElementById("main-container");
var choices = document.querySelectorAll('li');

choicesLength = choices.length;
var that = this;
for(var i = 0; i < choicesLength; i++) {

    choices[i].addEventListener("click", function(){
        var position = this.getAttribute("value");
        that.selections.push(position); //Explicitly specify context
        // logs array and updates with each click 
        console.log(that.selections);
    });
}       

return function(){
   this.selections;
}
}

```

You call the `getSelection` function like this:

```
var getUpdatedArray = getSelection();
//At a later stage when you want the array just do:
getUpdatedArray(); //This should return the selections array.

```

I explicitly bind the `selections` array to your function scope by doing `this.selections = []` and then set this context inside the click listeners by doing `var that = this`.

To reiterate the problem:

You were binding event listeners in your `getSelection` method that gets called once only. However, clicks can happen at any time later on. So you need to ensure two things:

1. The `selections` array referred to in the `click` event handler is the one defined in scope of `getSelection` method.
2. Somehow, preserve the scope of `getSelection` method even after it is executed.

Closures, magically solve both these problems. :)

A good starting point on why to use closures is [this](https://howtonode.org/why-use-closure).