Question

我正在使用Visual Studio Code。我试图在控制台中记录从UICtrl调用getInput方法的输入变量的值，但在控制台中显示错误“未捕获的TypeError：无法读取HTMLButtonElement.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>

JavaScript代码-

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();}
        
    });
     
})();

Answer 1

错误告诉您UICtrl函数正在运行时ctrlAddItem未定义。从而检查您如何调用controller函数。

只需更新调用controller函数的方式即可包括第二个必须具有getInput函数的参数。

Answer 2

您有一个需要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

出现错误-script.js：21未被捕获的TypeError：无法读取HTMLButtonElement.ctrlAddItem上未定义的属性'getInput'（script.js：21）

2 个答案: