[英]Unable to make second event listener work for MVC counter app
我正在尝试使用 MVC 方法创建一个简单的计数器应用程序,但我无法弄清楚为什么向下计数器的事件侦听器不起作用但向上计数器起作用。 必须有一些我忽略的东西,但我对这种方法完全陌生。 任何帮助将不胜感激。
//model
var model =
{
clickCount: 0
};
//controller
var controller = {
init: function() {
view.init();
},
incrementCounterUp: function() {
counter.textContent = model.clickCount += 1;
},
incrementCounterDown: function() {
counter.textContent = model.clickCount -= 1;
}
};
//view
var counter = document.createElement('p');
counter.textContent = (model.clickCount);
counter.id = counter;
document.body.appendChild(counter);
var upButton = document.createElement("button");
upButton.id = upButton;
document.body.appendChild(upButton);
var upButtonText = document.createTextNode("Up");
upButtonText.id = upButtonText;
upButton.appendChild(upButtonText);
var downButton = document.createElement("button");
downButton.id = downButton;
document.body.appendChild(downButton);
var downButtonText = document.createTextNode("Down");
downButtonText.id = downButtonText;
downButton.appendChild(downButtonText);
var view = {
init: function() {
// store pointers to our DOM elements for easy access
this.counterElem = document.getElementById(counter);
this.upButtonElem = document.getElementById(upButton);
this.upButtonElem.addEventListener('click', function(){
controller.incrementCounterUp();
});
this.downButtonElem = document.getElementById(downButton);
this.downButtonElem.addEventListener('click', function(){
controller.incrementCounterDown();
});
}
};
controller.init();
contoller.incrementCounterDown();
你拼错了“控制器”。 :P
//model
var model =
{
clickCount: 0
};
//controller
var controller = {
init: function() {
view.init();
},
incrementCounterUp: function() {
model.clickCount += 1
view.render()
},
incrementCounterDown: function() {
model.clickCount -= 1
view.render()
}
};
//view
var counter = document.createElement('p');
counter.textContent = (model.clickCount);
counter.id = 'counter';
document.body.appendChild(counter);
var upButton = document.createElement("button");
upButton.textContent = 'Up'
upButton.id = 'upButton';
document.body.appendChild(upButton);
var downButton = document.createElement("button");
downButton.textContent = 'Down';
downButton.id = 'downButton';
document.body.appendChild(downButton);
var view = {
init: function() {
// store pointers to our DOM elements for easy access
this.upButtonElem = document.getElementById('upButton')
this.downButtonElem = document.getElementById('downButton')
this.downButtonElem.addEventListener('click', function(){
controller.incrementCounterDown()
})
this.upButtonElem.addEventListener('click', function(){
controller.incrementCounterUp()
})
},
render: function() {
this.counterElem = document.getElementById('counter')
this.counterElem.textContent = model.clickCount
}
};
controller.init();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.