Question

我正在练习我的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();

Answer 1

发布的代码存在一些问题。

    var button = document.querySelectorAll("[class^='button']");
    button.onclick = this.writeEvent;

querySelectorAll的结果是NodeList。分配到其onclick属性将无法实现您的目标。您希望分配给每个节点的onclick属性。

但实际上并非如此简单，我们需要回到这一点。

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

这里的一个问题是target未定义。当然你的意思是event.target。

另一个问题是write也未定义。也许你的意思是this.write，但那实际上效果不好。问题是当从点击事件调用writeEvent时，它不会被调用对象，所以this不会绑定到计算器对象，并且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();

JavaScript中的模块模式

1 个答案: