Esta pregunta ya tiene una respuesta aquí:

Un caso dedocument.getElementById volviendonull. He leído otras cuatro preguntas en SO y leí la referencia en MDN, pero no tengo idea de lo que está mal; por favor, ayúdame. El código es el siguiente:

HTML

<button id="btnButton1">Button1!</button><br>
<button id="btnButton2">Button2!</button><br>
<span id="spanOutPut"></span>

Javascript

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);

Yo tengo unTypeError: getBYid(...) is null, en FireBug.

Funciona cuando simplemente elimino las llamadas aaddEventListener del JS y estableceronclick en línea, como en el siguiente código:

<button onclick="funButton1()">Button1"</button>

¿Cuál es la diferencia?