title: Getting variable value out of addEventListener
body: <p>How can I update the value of of the variable "clicked" after the function "clickListener" runs? It's definitely an issue with the "clicked" variable's scope.</p>
  
  <pre><code>var clicked = 'no';
  focus();
  listener = addEventListener('blur', clickListener);
  function clickListener(){
      if(document.activeElement == document.getElementById('someIframe')){
          clicked = 'yes';
          console.log(clicked);
      }
  };
  </code></pre>
  
  <p>Whenever I run this, console logs "yes" but the "outter" clicked is still no if I check the variable after the click happens. </p>
  
  <hr>
  
  <p>Here is a JSFiddle of my issue:
  <a href="https://jsfiddle.net/6c3nbpk5/4/" rel="nofollow">https://jsfiddle.net/6c3nbpk5/4/</a></p>
  
  <ol>
  <li>Open Console</li>
  <li>Note state of DIV "message" ('not clicked')</li>
  <li>Click in the iframe where it says "click me"</li>
  <li>Note that console shows 'Div Message: Clicked'</li>
  <li>Note variable within function should be updated to clicked confirmed by console</li>
  <li>Note Div "message" still displays not clicked.</li>
  </ol>
  
  <p>I need divMessage to update to clicked. However, All of this is within a function tracking multiple iframes so I can not append the variable to the window.</p>