JavaScript中的模块模式

我正在练习我的JS技能（我是新手）。我试图获取触发事件的特定元素，并将其显示在

span

元素中。但我不知道我做错了什么，当我点击按钮时什么也没发生

这是一个计算器程序，我正在做，但使用模块模式，我想它被称为

var Calculator = {
  init: function(){
    var button = document.querySelectorAll("[class^='button']");
    button.onclick = this.writeEvent;
  },
  write: function (element){
    document.getElementById("display").innerHTML = element;
  },
  writeEvent: function(event){
    write(target.event)
  }
}

Calculator.init();

---

发布的代码有几个问题

---

querySelectorAll

的结果是一个

NodeList

。 分配给它的

onclick

属性将无法达到您想要的效果。 您希望为每个单独节点的

onclick

属性赋值

但事实上这并不是那么简单，我们需要回到这个问题上来

---

这里的一个问题是，

target

未定义。 你的意思肯定是

事件.target

另一个问题是

write

也是未定义的。 也许你的意思是写这个， 但这实际上并不奏效。 问题是，当从单击事件调用

writeEvent

时， 不会在对象上调用它， 因此，

此

不会绑定到计算器对象， 而

this.write

调用将引发异常

有办法克服这个问题， 通过在设置对象时将

onclick

处理程序函数绑定到该对象

---

综合以上各项：

var Calculator = {
  init: function() {
    var nodeList = document.querySelectorAll("[class^='button']");
    var callback = this.writeEvent.bind(this);
    nodeList.forEach(item => item.onclick = callback);
  },
  write: function(element) {
    document.getElementById("display").innerHTML = element;
  },
  writeEvent: function(event) {
    this.write(event.target);
  }
}

Calculator.init();

---

其

事件.target

，请下次在这里询问之前检查控制台；）另外，

按钮。onclick

将不起作用，因为

按钮

是

节点列表

而不是

元素

。

  writeEvent: function(event){
    write(target.event)
  }

var Calculator = {
  init: function() {
    var nodeList = document.querySelectorAll("[class^='button']");
    var callback = this.writeEvent.bind(this);
    nodeList.forEach(item => item.onclick = callback);
  },
  write: function(element) {
    document.getElementById("display").innerHTML = element;
  },
  writeEvent: function(event) {
    this.write(event.target);
  }
}

Calculator.init();