Javascript 控制器中分配的onclick处理程序未执行_Javascript_Html

Javascript 控制器中分配的onclick处理程序未执行

javascript html

Javascript 控制器中分配的onclick处理程序未执行,javascript,html,Javascript,Html,我有一个输入字段，我正试图用加号按钮和减号按钮来改变它的值。其思想是，sideController应该为onclick事件分配一个函数，该函数将增加或减少模型中input元素中的数字。然后，模型将调用其观察者对象的update函数，这将导致在input元素的屏幕上更新数字然而，现在什么都没有发生。我甚至没有收到错误消息。在我看来，onclick事件的分配似乎不正确，因为如果我在plusButton函数的sideController文件中放置警报，当我单击时不会在屏幕上引起警报我做错了什么 &

我有一个输入字段，我正试图用加号按钮和减号按钮来改变它的值。其思想是，

sideController

应该为

onclick

事件分配一个函数，该函数将增加或减少模型中

input

元素中的数字。然后，模型将调用其观察者对象的

update

函数，这将导致在

input

元素的屏幕上更新数字

然而，现在什么都没有发生。我甚至没有收到错误消息。在我看来，onclick事件的分配似乎不正确，因为如果我在

plusButton

函数的

sideController

文件中放置

警报

，当我单击时不会在屏幕上引起警报

我做错了什么

<!DOCTYPE html>
<html lang="en">
  <body>
  <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 sidebar collapse" id="sidebar">
      <div class="noofpeople">
        <div class="row noofpeople-wrapper">
          <input id="numberOfGuests" type="number" class="form-control">
          <button type="button" id="plusButton"></button>
          <button type="button" id="minusButton"></button>
        </div>
      </div>
  </div>

  <!-- jQuery -->
      <script src="https://code.jquery.com/jquery.js"></script>

  <!-- The application JavaScript code -->  
      <script src="js/app.js"></script>
      <script src="js/model/dinnerModel.js"></script>
      <script src="js/view/sidebarView.js"></script>
      <script src="js/controllers/sidebarController.js"></script>
  </body>
</html>

app.js

$(function() {
    //We instantiate our model
    var model = new DinnerModel();
    // And create the instance of ExampleView
    var sidebar = $("#sidebar");
    if(sidebar[0] != undefined){
        var sidebarView = new SideBarView(sidebar, model); 
        var sidebarController = new SideController(sidebar, model);
    }

    var dishreel = $("#dishreel");
    if(dishreel[0] != undefined){
        var dishReelView = new DishReelView(dishreel, model);   
    }
});

sidebarView.js：

var SideBarView = function(container, model){
    var numberOfGuests = container.find("#numberOfGuests");

    numberOfGuests.val(model.getNumberOfGuests);

    this.update = function(){
        numberOfGuests.val(model.getNumberOfGuests());
    }
}

dinnerModel.js

var DinnerModel = function() {

    //TODO Lab 1 implement the data structure that will hold number of guest
    // and selected dishes for the dinner menu

    var numberOfGuests = 0;

    var selectedDishes = [];

    var observers = []; 

    this.notifyObservers = function(){
        for(var i = 0; i<observers.length; i++){
            observers[i].update();
        }
    }
    this.incrNumberOfGuests = function(){
        numberOfGuests++;
        this.notifyObservers();
    }
    this.decrNumberOfGuests = function(){
        numberOfGuests--;
        this.notifyObservers();
    }

    this.getNumberOfGuests = function() {
        return numberOfGuests;
    }
}

var DinnerModel=function（）{
//TODO Lab 1实现将容纳来宾数的数据结构
//还有晚餐菜单上的精选菜肴
var numberOfGuests=0；
var selectedDishes=[]；
var观察员=[]；
this.notifyObservers=函数（）{
for（var i=0；iplusButton
是一个包装DOM元素的jQuery对象。onclick
不是一个有意义的jQuery属性。您可以设置它，但jQuery不会使用它
要附加click事件处理程序，可以直接访问DOM元素，如下所示：
// Access DOM element directly and set onclick attribute
plusButton[0].onclick = function(){};

或者可以使用jQuery的click（）
或on（'click'）
函数将事件处理程序附加到jQuery“数组”（0或更多）中的所有DOM元素，如下所示：
检查你的代码是否干净，是否组织良好，所有标记是否关闭，因为这些小事情很重要。在大范围内，它看起来应该可以工作。好了！！！！
// Access DOM element directly and set onclick attribute
plusButton[0].onclick = function(){};

// Use jQuery's event handling functions
plusButton.click(function(){});
// or
plusButton.on('click', function(){});