title: Unable to attach eventHandler in JavaScript
body: <p>I have been writing a javascript code that creates a button. But I'm unable to attach event handler to buttons. When I try to get child, it returns undefined. There are two functions, one creates button when window loads and other function tries to get the children. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function ()
          {
              f1();
              reader();
          }
         function f1()
         {
          var x = document.getElementById("buttons");
          for(var i=9;i&gt;=0;i--)
          {
              
              var y = document.createElement("BUTTON");
              y.setAttribute("class","btn btn-primary btn-lg");
              y.setAttribute("id","mybtn");
              var z = document.createTextNode(i);
              
               y.appendChild(z);
              x.appendChild(y);
              
          }
         function reader()
          {
              var x = document.getElementById("mybtn").firstChild;
              alert(x);
              
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="stage"&gt;
              &lt;div id="screen"&gt;
                  
                  
              &lt;/div&gt;
              &lt;div id="buttons"&gt;
                  
                  
              &lt;/div&gt;
              &lt;div id="sb"&gt;
                  
                  
              &lt;/div&gt;
              
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>