Push items into array using eventlistener

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 1

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.

Answer 2

Basically move selections otuside of the function getSelection and make it public.

var selections = [];

function getSelection() {
    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);
            console.log(selections);
        });
    }       
    console.log(selections);
}
window.onload = getSelection;

// access selections outside of getSelection()
setInterval(function () {
    if (selections.length < 2) {
        console.log('length is smaller than two.');
    }
}, 1500);

<ul><li value="1">1</li><li value="2">2</li><li value="3">3</li><li value="4">4</li><li value="5">5</li><li value="6">6</li></ul>

Answer 3

This is about Javascript Scoping , you can lean more about it here:
Learn more about Javascript Scoping and hoisting

The first console.log(selection) is local while the last console.log(selection) is is global, the two are not the same, that is why it is empty. Here is the edited form of my solution:

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",pushArray(i));
  }
  
  function pushArray(elm) {
  var position = choices[elm].getAttribute("value");
  selections.push(position);
  // logs array and updates with each click 
 console.log(selections);
}
  // logs empty array
  console.log(selections);
}


document.body.addEventListener("load", getSelection());

<ul>
  <li value="1">1</li>
  <li value="2">2</li>
  <li value="3">3</li>
  <li value="4">4</li>
  <li value="5">5</li>
  <li value="6">6</li>
  <li value="7">7</li>
  <li value="8">8</li>
  <li value="9">9</li>
  <li value="10">10</li>
</ul>

Answer 4

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.