title: How can I add Event Listener to a function expression
body: <p>In my html code, i have a button </p>
  
  <pre><code>&lt;button id="btn"&gt;Click Me&lt;/button&gt;
  </code></pre>
  
  <p>and a javascript code:</p>
  
  <pre><code>var trial;
  
  document.getElementById("btn").addEventListener("click", tro)
  
  function tro() { 
      if (trial == undefined) {
          alert("Good Programming") 
      }
      else {
          alert("Bad Programming")   
      }
  };
  </code></pre>
  
  <p>If the button is clicked, it returns "good programming". However, with an onclick attribute on my button, I can control the function even in it's anonymous state and get the same result</p>
  
  <pre><code>&lt;button id="btn" onclick="tro()"&gt;
  </code></pre>
  
  <p>Javascript code:</p>
  
  <pre><code>var trial;
  
  var x = function() { 
      if (trial == undefined) {
          alert("Good Programming") 
      }
      else {
          alert("Bad Programming") 
      }
  };
  </code></pre>
  
  <p>but using the addEventListener (without the onclick attribute) for a function expression will do nothing:</p>
  
  <pre><code>var trial;
  
  document.getElementById("btn").addEventListener("click", tro)
  
  var x = function() { 
      if (trial == undefined) {
          alert("Good Programming") 
      }
      else {
          alert("Bad Programming") 
      }
  };
  </code></pre>
  
  <p>How can I add an event handler to a function expression that will successfully execute the code.</p>