javascript - 无法使第二个事件监听器适用于 MVC 计数器应用程序

标签 javascript events model-view-controller event-handling dom-events

我正在尝试使用 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();

您拼错了“ Controller ”。 :P

关于javascript - 无法使第二个事件监听器适用于 MVC 计数器应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40033382/

相关文章:

php - Controller 能否捕获模型抛出的异常?

php - 从 PHP 访问 JavaScript 变量

vb.net - 在重写 FormClosing 事件以隐藏而不是关闭后杀死表单的更好方法?

javascript - 合并来自不断变化的 Observables 列表的事件

javascript - JQuery Click 事件在 Firefox 和 Safari 浏览器中不起作用

model-view-controller - 如何在 Zend Framework (1.11) Controller 操作中生成绝对 URL?

model-view-controller - ir.ui.view 中 iframe 的 Odoo 8 src 变量

javascript - 将 ontouch 事件委托(delegate)给 onclick 监听器 js

javascript - 如何让 jQuery 聊天回复我

javascript - 如何在 ExtJS 中禁用文本字段的 inputEl?