未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39; null，但我有这个id的东西

Question

我正在构建chrome扩展程序，在我的popup.js文件中，我收到一条错误消息

popup.js:17 Uncaught TypeError: Cannot read property 'addEventListener' of null

我想要做的是在popup.html中单击按钮时执行脚本。

// var app = chrome.runtime.getBackgroundPage();

function alert() {
       chrome.tabs.executeScript({
       file: 'alert.js'
});
}
function saveit(){
       chrome.tabs.executeScript({
    file: 'save.js'
});
}

document.getElementById('button').addEventListener('click', alert);
document.getElementById("savebutton").addEventListener('click', saveit);

我的页面上有两个按钮，两者的代码完全相同。带有id按钮的第一个工作，带有id savebutton的第二个工作，并且返回错误。我读谷歌和堆栈溢出它可能是因为我得到一个id不存在的元素，但我确实有正确的ID。 这两个标签是

<button id="button">CLICK ME</button> 和

<button id="savebutton">THIS</button>

我不知道它可能是什么。在此先感谢您的帮助。

编辑 - 修正了它。我必须将脚本标记放在html代码中的按钮之后。我猜它是在创建按钮之前运行脚本。