Блог

Главная - Вопросы по программированию - Невозможно заставить второй прослушиватель событий работать для приложения счетчика MVC

Невозможно заставить второй прослушиватель событий работать для приложения счетчика MVC

#javascript #events #model-view-controller #event-handling #dom-events

#javascript #Мероприятия #model-view-controller #обработка событий #dom-события

Вопрос:

Я пытаюсь создать простое приложение-счетчик, используя подход 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();

Ответ №1:

 contoller.incrementCounterDown();

Вы неправильно написали «контроллер». : P

Комментарии:

1. Он по-прежнему не работает, при обоих прослушивателях счетчик вниз не перемещается, но если есть только один, он будет работать.

2. Понял это. Спасибо всем за помощь. / s

Ответ №2:

  //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();
Метки: