JavaScript中的模块模式

我正在练习我的JS技能（我是新手）。我试图获取触发事件的特定元素并将其显示在span元素中。但是我不知道我做错了什么，当我点击按钮时什么也没有发生。JavaScript中的模块模式

这是一个计算器程序，我正在做但使用模块模式，我认为这是所谓的。

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();

来源

2017-11-03 Richard Hearn

它'event.target'，请询问这里之前检查下一次控制台;） –

另外'button.onclick'不会因为工作' button'是'NodeList'而不是'Element'。 – Titus

发布的代码有几个问题。

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从一个click事件，称它不会被调用的对象，所以将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();

来源

2017-11-19 20:20:52 janos

JavaScript中的模块模式

回答

相关问题