title: Push Array of List Item Elements to Array Outside of Loop (Plain JavaScript)
body: <p>I'm trying to push a list of collected items (fruits) to an empty array outside of the loop. </p>
  
  <p>Then I want to access each fruit from the array with addEventListener, and append them to a container (fruit basket) on click. </p>
  
  <p>I got the function itself to work fine in a different way: <a href="https://jsfiddle.net/ec4hqas2/" rel="nofollow">https://jsfiddle.net/ec4hqas2/</a></p>
  
  <p>However that's with the eventListener <em>inside the loop,</em> I want it outside, like this: </p>
  
  <p><a href="https://jsfiddle.net/ec4hqas2/8/" rel="nofollow">https://jsfiddle.net/ec4hqas2/8/</a></p>
  
  <pre><code>(function() {
  
    var fruits = document.querySelectorAll('.list li');
    var fruit_basket = document.querySelector('.fruit-basket');
    var fruits_array = [];
  
    for (var i = 0; i &lt; fruits.length; i++) {
      // Returns only numbers
      fruits_array.push(i);
  
      /* This returns the entire NodeList:
      fruits_array.push(fruits[i]); 
      */
    }
    console.log(fruits_array); // result: [0,1,2]
  
    // Append each clicked fruit to fruit basket
    fruits_array[i].addEventListener('click', function() {
      fruit_basket.appendChild(this);
  
    });
  
  })();
  </code></pre>
  
  <p>Problem is that I can only manage to push the number of fruits from the loop to the array. How do I push the entire list item elements with their fruit name to the empty array? </p>
  
  <p><strong>The reason I'm trying to do this,</strong> is that I recall being told that keeping eventListener out of loop was a good practice, but I might have mixed things up, is this a bad idea in the first place?</p>
  
  <p>I read these articles trying to wrap my head around NodeLists &amp; Arrays, but I'm still confused: 
  <a href="https://davidwalsh.name/nodelist-array" rel="nofollow">https://davidwalsh.name/nodelist-array</a>
  <a href="https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/" rel="nofollow">https://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/</a></p>
  
  <p>Any help greatly appreciated! :-)</p>