title: AddEventListener for button dynamically
body: <p>Code:1 gives me error <code>Cannot call method 'addEventListener' of null</code>, because button is templated after script code is executed.</p>
  
  <p><strong>Code:1</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;script&gt;
      var button = document.getElementById("buttonid");
           button.addEventListener("click", function() { console.log("alert");});
  &lt;/script&gt;
  &lt;body&gt;
      &lt;input type="button" id="buttonid" value="click"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Code:2</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;input type="button" id="buttonid" value="click"&gt;
  &lt;/body&gt;
       &lt;script&gt;
          var button = document.getElementById("buttonid");
               button.addEventListener("click", function() { console.log("alert");});
       &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here code:2 is working. I want Code:1 to be work as Code:2. How to solve this problem.</p>
  
  <p><strong>Note:</strong></p>
  
  <p>I don't want to use <code>jQuery</code></p>