title: `getElementById` returning null
body: <p>A case of <code>document.getElementById</code> returning <code>null</code>. I've read four other questions in SO, and read the reference on MDN, but I have no clue of what's wrong; please help me. Code is as follows:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button id="btnButton1"&gt;Button1!&lt;/button&gt;&lt;br&gt;
  &lt;button id="btnButton2"&gt;Button2!&lt;/button&gt;&lt;br&gt;
  &lt;span id="spanOutPut"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>getBYid = function(elem) {
      return document.getElementById(elem); }
  
  funButton1 = function() { getBYid('spanOutPut').innerHTML = "Button 1 pressed!!" };
  funButton2 = function() { getBYid('spanOutPut').innerHTML = "Did you press the Button 2?!" };
  
  getBYid("btnButton1").addEventListener('click', funButton1, false);
  getBYid("btnButton2").addEventListener('click', funButton2, false);
  </code></pre>
  
  <p>I get a <code>TypeError: getBYid(...) is null</code>, on FireBug.</p>
  
  <p>It works when I simply remove the calls to <code>addEventListener</code> from the JS and set <code>onclick</code> inline, as in the following code:</p>
  
  <pre><code>&lt;button onclick="funButton1()"&gt;Button1"&lt;/button&gt;
  </code></pre>
  
  <p>What is the difference?</p>