title: Filling array on event and access it outside the event function handler
body: <p>I'm trying to fill an array on an event (onclick) with the button's value (there will be different buttons with different values, that's why I'm using an array), and I want to be able to access that array outside the event handler function. 
  This is what I tried so far, but I just can't figure how to access the array outside the event handler function. </p>
  
  <p>Here's the HTML: </p>
  
  <pre><code>&lt;button value="5"&gt; button &lt;/button&gt;
  &lt;div&gt; The value is: &lt;span id="res"&gt;&lt;/span&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And here the script: </p>
  
  <pre><code>var n = [];
  var val;
  var ret;
  
  function add(arr,val) {
  arr.push(val); 
  return val;
  } 
  document.body.addEventListener("click", function(event) {
      if (event.target.nodeName == "BUTTON") {
          val = event.target.value;
          ret = add(n, val); 
          console.log(n);      //these console.log are tests
          console.log(ret);
      } 
   console.log(ret);    //also this
  });
  
  //need to access the array here
  console.log(n);    //obv doesn't work
  console.log(ret);  //same
  
  document.getElementById("res").innerHTML = ret;  //it remains undefined, obv
  </code></pre>
  
  <p>I know why this doesn't work (it's because I do all the thing inside the event handler function), but I can't figure it out how to do what I want to do.</p>
  
  <p>Any suggestions?</p>