`getElementById`返回null

Question

document.getElementById返回null的情况。我在SO中读过其他四个问题，并阅读MDN上的参考资料，但我不知道出了什么问题;请帮我。代码如下：

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

我在FireBug上获得TypeError: getBYid(...) is null。

当我只是从JS中删除对addEventListener的调用并设置onclick内联时，它就可以工作，如下面的代码所示：

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

有什么区别？

Answer 1

您必须在将这些元素加载到DOM

之后放置它