javascript - 为什么getElementById在模块模式中返回null

This question already has answers here:

Why is document.GetElementById returning null [duplicate]

                                    （6个答案）


                                5年前关闭。


我正在尝试从acticle from css-tricks实现模块模式
这是我的返回对象：

var MyModule = (function() {
  var pSettings; //private context

  return {
      settings: {
          time: Date.now(),
          myBtn: document.getElementById('myBtn')
      },

      init: function () {
          pSettings = this.settings;
          this.bindUIActions();
      },

      bindUIActions: function () {
          pSettings.myBtn.onclick = someFunction;
          console.log('binding');
      },

      someFunction: function() {
          console.log('someFunction');
      }
  }
})();

Fiddle

当我使用MyModule.init（）时，出现类似myBtn is null的错误

未捕获的TypeError：无法将属性'onclick'设置为null

，为什么会发生？

最佳答案

这可能与时间有关。第一次定义我的模块时，正在执行document.getElementById('myBtn')，这可能是在HTML文档被解析之前，因此myBtn尚不存在。

MyModule内的对象及其所有属性都是在首次定义和创建MyModule时创建的。 myBtn属性是静态值，该属性在首次创建时初始化。如果希望它成为仅按需评估的函数，则必须使其成为可以在所需时间调用的函数。

您有几种方法可以修复它。

您可以停止尝试预提取myBtn DOM元素，而仅在需要时才按需获取它。
您可以将此Javascript移动到<body>标记的末尾，或将其放入某种ready函数中，以便在DOM准备就绪之前不会执行。
您可以在第一次使用（DOM准备就绪时）而不是预先缓存myBtn。
当DOM准备就绪时，可以将myBtn属性的初始化更改为.init()方法。

我的建议将是第一选择。

mybtn

javascript - 为什么getElementById在模块模式中返回null