getting error - script.js:21 Uncaught TypeError: Cannot read property 'getInput' of undefined at HTMLButtonElement.ctrlAddItem (script.js:21)

Question

I am using Visual Studio Code. I am trying to console log the value of input variable which calls the getInput method from UICtrl, but it shows the error "Uncaught TypeError: Cannot read property 'getInput' of undefined at HTMLButtonElement.ctrlAddItem (script.js:21)" in console. PLEASE HELP WITH IT.

HTML Code-

<!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 code-

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

The error is telling you UICtrl is undefined when the ctrlAddItem function is running. which leads to check how you are invoking the controller function.

Just update how you call the controller function to include the second argument which must have a getInput function.

Answer 2

You have a function which expects 2 arguments, but you are not passing any.

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

Also I don't know why you are wrapping everything in (function(){})() , but you dont need it everywhere. You could just do this instead:

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

getting error - script.js:21 Uncaught TypeError: Cannot read property 'getInput' of undefined at HTMLButtonElement.ctrlAddItem (script.js:21)

Question

2 answers

solution1
1 2020-07-30 12:06:53

solution2
1 ACCPTED 2020-07-30 12:07:06

getting error - script.js:21 Uncaught TypeError: Cannot read property 'getInput' of undefined at HTMLButtonElement.ctrlAddItem (script.js:21)

Question

2 answers

solution1 1 2020-07-30 12:06:53

solution2 1 ACCPTED 2020-07-30 12:07:06

solution1
1 2020-07-30 12:06:53

solution2
1 ACCPTED 2020-07-30 12:07:06