Esta pergunta já tem uma resposta aqui:

Um caso dedocument.getElementById retornandonull. Li quatro outras perguntas no SO e li a referência no MDN, mas não tenho idéia do que está errado; por favor me ajude. O código é o seguinte:

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

Eu recebo umTypeError: getBYid(...) is null, no FireBug.

Funciona quando simplesmente removo as chamadas paraaddEventListener do JS e definaonclick inline, como no código a seguir:

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

Qual é a diferença?