Javascript addEventListener模块模式

我不知道为什么，但当我点击“按钮”时，什么都没发生

控制台中没有消息，没有错误。如何修复它

JS

HTML

addbird

刚刚在CodePen中尝试了这个示例：

据我所知，您的代码似乎按预期工作。在Chrome中，每次点击按钮都会在控制台上记录“addBird”消息

---

您是否期待一些不同的东西？

这是因为JavaScript在DOM（基本上是HTML标记）准备就绪之前加载。因此，

按钮

变量等于

NULL

解决此问题的两种方法：

• 将JavaScript移动到页面末尾，刚好在
  标记之前
• 使用jQuery的document ready函数包装JavaScript代码：
  

  $（函数（）{
  //代码在这里
  });

---

好的，如果我插入并在鸟巢外，它可以工作。。。所以它不是.render（）函数。谢谢你的帮助。：）

如果在按钮存在后运行JS，那么。虽然它没有真正的意义-为什么您要立即将

addBird

绑定为事件处理程序，并将其作为对象的方法返回？我刚刚将您的代码粘贴到fiddle中，它似乎对我有效@nnnnnnnnnn，因为我尝试使用控制台（通过控制台它工作）。事实上，它可以像这样工作。我没有给你我所有的密码。这个问题是由于_render（）函数返回mustach.render（…）。请看一看：好的，如果我插入并超出#birdMod，它会工作。。。所以它不是.render（）函数。谢谢你的帮助。那么你对“为什么这不管用？”的“回答”是“它管用”？这更多的是一个评论（并且在任何情况下都不需要重复OP的所有JS）。如果它没有损坏，不要尝试修复它：）。问题明确指出OP“控制台中没有消息”。因此对他们来说，它没有按预期工作。很明显，他们在做其他错误的事情，因为代码本身是好的（假设JS是在按钮添加到DOM之后运行的）。@nnnnnn，没有适当的mcve，这只是猜测。例如，他可以重新定义“控制台”，或者进行一些不清楚的devtools调优……是的，这是一个公平的观点！我添加了OP的JS，因为如果没有它，我就无法嵌入到工作示例的链接。我是新来的！但我不同意让OP知道他们的代码是好的是不值得的。他们可能对什么是“工作”有不同的期望（因此我在编辑中提出了这个问题）。尝试在dom之前加载他的脚本，您将得到“无法读取属性addEventListener of null”，实际上一切都正常。我的问题是因为胡子。渲染：如果我插入并超出#birdMod，它会工作。。。所以它不是.render（）函数。谢谢你的帮助。

var bird = (function(){

    let button    = document.querySelector('#addBird');

    button.addEventListener('click', addBird);

    function addBird()
    {
       console.log('addBird');
    };

    return {
        addBird: addBird
    };
})();

<button id="addBird">Add Bird</button>

var bird = (function(){

    let button    = document.querySelector('#addBird');
    button.addEventListener('click', addBird);

    function addBird()
    {
       console.log('addBird');
    };

    return {
        addBird: addBird
    };

})();