添加事件侦听器时出错

Question

首先，我知道这类问题已被问过数千次，但为什么这不起作用？ 我有一个带有options.html的chrome扩展程序和一个用于将内容保存到本地存储的保存按钮：

<div>       
    <button type="button" name="save" class="btn btn-primary btn-md active" id="save">SAVE</button>         
</div>      

这是我的选择.js：

document.getElementById('save').addEventListener('click',
save_options);

但是，它在chrome控制台中给出了这个错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

我在俯瞰什么？

Answer 1

您收到该错误是因为您尝试将事件侦听器添加到尚未创建的元素，将js脚本放在正文的末尾，或者使用DOMContentLoaded事件，

Answer 2

您尝试将事件侦听器添加到尚未创建的元素。 添加事件istener到DOMContentLoaded以在生成DOM后执行您的侦听器。

document.addEventListener("DOMContentLoaded", function() { 
  document.getElementById('save').addEventListener('click',
  save_options);
});

这应该做的工作。