使用JavaScript添加onclick，并使用模块模式显示/隐藏div

我正在尝试使用我找到的模式创建一个JavaScript模块

我想将onclick事件添加到

以下是我的HTML：

<a href="#" id="clickHere">Click here to toggle visibility</a>
<div id="foo">This is foo</div>

以下是我的JavaScript：

var s;
ShowHideWidget = {

  settings : {
    clickHere : document.getElementById('clickHere'),
    foo       : document.getElementById('foo')
  },

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

  bindUIActions : function() {
    s.clickHere.onclick =
        ShowHideWidget.toggleVisibility(s.foo);
  },

  toggleVisibility : function(id) {
    if(id.style.display == 'block') {
      id.style.display = 'none';
    } else {
      id.style.display = 'block';
   };
  }

};

(function() {
  ShowHideWidget.init();
})();

---

我不确定这为什么不起作用。

当您分配onclick处理程序时，您正在执行函数，而不是将其附加为处理程序，因此onclick成为toggleVisibility的返回值，该值为null

尝试：

---

非常感谢你解释我做错了什么。我希望我能给你多投一票：）

var s;
ShowHideWidget = {

  settings : {
    clickHere : document.getElementById('clickHere'),
    foo       : document.getElementById('foo')
  },

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

  bindUIActions : function() {
    s.clickHere.onclick =
        ShowHideWidget.toggleVisibility(s.foo);
  },

  toggleVisibility : function(id) {
    if(id.style.display == 'block') {
      id.style.display = 'none';
    } else {
      id.style.display = 'block';
   };
  }

};

(function() {
  ShowHideWidget.init();
})();

var s;
ShowHideWidget = {

  settings : {
    clickHere : document.getElementById('clickHere'),
    foo       : document.getElementById('foo')
  },

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

  bindUIActions : function() {
    s.clickHere.onclick = function() {
        ShowHideWidget.toggleVisibility(s.foo);
    };
  },

  toggleVisibility : function(id) {
    if(id.style.display == 'block') {
      id.style.display = 'none';
    } else {
      id.style.display = 'block';
   };
  }

};

(function() {
  ShowHideWidget.init();
})();