Javascript 获取错误-script.js:21未捕获类型错误：无法读取属性'；getInput'；在HTMLButtonElement.ctrlAddItem（script.js:21）中未定义的_Javascript_Html_Module

Javascript 获取错误-script.js:21未捕获类型错误：无法读取属性'；getInput'；在HTMLButtonElement.ctrlAddItem（script.js:21）中未定义的

javascript html module

Javascript 获取错误-script.js:21未捕获类型错误：无法读取属性'；getInput'；在HTMLButtonElement.ctrlAddItem（script.js:21）中未定义的,javascript,html,module,Javascript,Html,Module,我正在使用VisualStudio代码。我试图通过控制台记录从UICtrl调用getInput方法的输入变量的值，但它在控制台中显示错误“Uncaught TypeError:无法读取HtmlButtoneElement.ctrlAddItem（script.js:21）处未定义的属性'getInput'。请帮忙 HTML代码- <!DOCTYPE html> <html> <head> <meta charset="u

我正在使用VisualStudio代码。我试图通过控制台记录从UICtrl调用getInput方法的输入变量的值，但它在控制台中显示错误“Uncaught TypeError:无法读取HtmlButtoneElement.ctrlAddItem（script.js:21）处未定义的属性'getInput'。请帮忙

HTML代码-

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css2?family=Kalam&family=Recursive&family=Rowdies:wght@300&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="assets\stylesheet\main.css">
        <title>BUDGETOFY</title>
    </head>
<body class="container">
<div class="background">
    <div class="av-budget-heading">Available Budget:</div>
    <div class="av-budget">+2,500</div>
    <div class="income">
        <div class="inex-heading left">Income</div>
        <div class="inex-number little-right-1">+3,500</div>
    </div>
    <div class="expense">
        <div class="inex-heading left">Expenses</div>
        <div class="inex-number little-right-2">-1,000</div>
        <div class="ex-percent right percent-main">28%</div>
    </div>
    
    
</div>
   <hr> 
<div class="selections">
    <select class="drop-down add-type">
        <option value="inc" selected>+</option>
        <option value="exp">-</option>
    </select>
    <input type="text" class="drop-down add-description" placeholder="Add Description">
    <input type="number" class="drop-down add-value" placeholder="Value">
    <button id="button"><i class="ion-ios-checkmark-outline ok-btn"></i></button>
</div>
   <hr>
<div class="wrapper line">
    <div class="income-down">
        <h2 class="in">INCOME</h2>
        <div class="add-income inc-left">salary</div>
        <div class="income-amt inc-amt">+2,000</div>
        <div class="add-income inc-left">sold car</div>
        <div class="income-amt inc-amt">+1,500</div>
    </div>
    
    <div class="expense-down">
        <h2 class="ex">EXPENSES</h2>
        <div class="add-expense exp-left">rent</div>
        <div class="expense-amt exp-amt">-900</div>
        <div class="add-expense exp-left">grocery</div>
        <div class="expense-amt exp-amt">-100</div>
    </div>
    
</div>


<script src="script.js"></script>
</body>
</html>

错误是告诉您当

ctrlAddItem

函数运行时，

UICtrl

未定义。这将导致检查如何调用

控制器

函数

只需更新调用

控制器

函数的方式，以包含第二个参数，该参数必须具有

getInput

函数。

错误告诉您当

ctrlAddItem

函数运行时，

UICtrl

未定义。这将导致检查如何调用

控制器

函数

只需更新调用

控制器

函数的方式，以包含第二个参数，该参数必须具有

getInput

函数。

您有一个函数需要两个参数，但不传递任何参数

var budgetController = (function(){

})();


var UIController = (function(){
    return {
        getInput: function(){
            return{
                type: document.querySelector('.add-type').value, // inc or exp
                decription: document.querySelector('.add-description').value,
                value: document.querySelector('.add-value').value
            };
        }
    };
})();


var controller = (function(budgetCtrl, UICtrl){
    var ctrlAddItem = function(){
        var input = UICtrl.getInput();
        console.log(input);
    }

    document.getElementById('button').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event){
        if(event.keyCode === 13 || event.which === 13)
            {ctrlAddItem();}
        
    });
     
})(budgetController, UIController ); // Pass them here

另外，我不知道为什么要将所有内容都包装在

（function（）{}）（

）中，但您并不需要在任何地方都使用它。您可以这样做：

var budgetController = {

};


var UIController = {
    getInput: function(){
       return{
           type: document.querySelector('.add-type').value, // inc or exp
           decription: document.querySelector('.add-description').value,
           value: document.querySelector('.add-value').value
       };
    }
}


var controller = (function(budgetCtrl, UICtrl){
    var ctrlAddItem = function(){
        var input = UICtrl.getInput();
        console.log(input);
    }

    document.getElementById('button').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event){
        if(event.keyCode === 13 || event.which === 13)
            {ctrlAddItem();}
        
    });
     
})(budgetController, UIController ); // Pass them here

您有一个需要2个参数的函数，但您没有传递任何参数

var budgetController = (function(){

})();


var UIController = (function(){
    return {
        getInput: function(){
            return{
                type: document.querySelector('.add-type').value, // inc or exp
                decription: document.querySelector('.add-description').value,
                value: document.querySelector('.add-value').value
            };
        }
    };
})();


var controller = (function(budgetCtrl, UICtrl){
    var ctrlAddItem = function(){
        var input = UICtrl.getInput();
        console.log(input);
    }

    document.getElementById('button').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event){
        if(event.keyCode === 13 || event.which === 13)
            {ctrlAddItem();}
        
    });
     
})(budgetController, UIController ); // Pass them here

另外，我不知道为什么要将所有内容都包装在

（function（）{}）（

）中，但您并不需要在任何地方都使用它。您可以这样做：

var budgetController = {

};


var UIController = {
    getInput: function(){
       return{
           type: document.querySelector('.add-type').value, // inc or exp
           decription: document.querySelector('.add-description').value,
           value: document.querySelector('.add-value').value
       };
    }
}


var controller = (function(budgetCtrl, UICtrl){
    var ctrlAddItem = function(){
        var input = UICtrl.getInput();
        console.log(input);
    }

    document.getElementById('button').addEventListener('click', ctrlAddItem);

    document.addEventListener('keypress', function(event){
        if(event.keyCode === 13 || event.which === 13)
            {ctrlAddItem();}
        
    });
     
})(budgetController, UIController ); // Pass them here