app.js：92未捕获的ReferenceError：未定义newCalculation

Question

Okay, I am noobie and currentlylearning javascript. I was trying to create a web app by following some tutorial and decided to perform a task using an alternate method instead of just copying the code.

Now, I am stuck with the following

app.js:92 Uncaught ReferenceError: newCalculation is not defined
at Object.calculateBudget (app.js:92)
at ctrlAddItem (app.js:221)
at HTMLDocument. (app.js:198)

This is my code, I have highlighted the necessary lines

var budgetController = (function() {
  var Expense = function(id, description, value) {
    this.id = id,
      this.description = description,
      this.value = value
  }
  var Income = function(id, description, value) {
    this.id = id,
      this.description = description,
      this.value = value
  }
  var data = {
    allIteams: {
      exp: [],
      inc: []
    },
    totals: {
      exp: 0,
      inc: 0
    },
    budget: 0,
    percentage: 0
  };

  return {
    addItem: function(type, des, val) {
      var newItem, Id;

      if (data.allIteams[type].length > 0) {
        id = data.allIteams[type][data.allIteams[type].length - 1].id + 1;
      } else {
        id = 0;
      }


      if (type === 'exp') {
        newItem = new Expense(id, des, val);
      } else if (type === 'inc') {
        newItem = new Income(id, des, val);
      }
      data.allIteams[type].push(newItem);
      return newItem;
    },

    deleteItem: function(type, id) {
      var ditem;
      var ids = data.allIteams[type].map(function(current) {
        console.log(current.id);
        return current.id;
      });

      index = ids.indexOf(id);
      //ditem = data.allIteams.inc[index].value;
      console.log("value deleted is " + ditem);
      if (index !== -1) {
        data.allIteams[type].splice(index, 1); **
        newCalculation(); **
        /*
                    if (type === 'inc') {
                    data.budget = data.budget - ditem;
                        console.log("The income value to be subtracted " + data.budget);
                          document.querySelector('.budget__value').innerHTML = data.budget;


                    }
                      else if (type === 'exp') {
                        data.budget = data.budget + ditem;
                            console.log("The expense value to be subtracted is " + data.budget);
                                document.querySelector('.budget__value').innerHTML = data.budget;

                      }
        */
      }
    },

    calculateBudget: function(cur, type) {

      //calculate total income and expense
      if (type === 'inc') {
        data.totals[type] += cur.value;
        console.log(data.totals[type]);

      } else if (type === 'exp') {
        data.totals[type] += cur.value;
        console.log(data.totals[type]);
      } **
      newCalculation(); **
    },

    **
    newCalculation: function() {
      data.budget = data.totals.inc - data.totals.exp;
      if (data.totals.inc > 0) {
        data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
      } **
    },


    getBudget: function() {
      return {
        budget: data.budget,
        percentage: data.percentage,
        totalInc: data.totals.inc,
        totalExp: data.totals.exp
      }
    },
    testing: function() {
      console.log(data);
    }


  };
})();

var UIController = (function() {

  var DOMstrings = {
    inputType: '.add__type',
    inputDescription: '.add__description',
    inputValue: '.add__value',
    addBtn: '.add__btn',
    incomeContainer: '.income__list',
    expenseContainer: '.expenses__list',
    container: '.container'
  };

  return {
    getInput: function() {
      return {
        type: document.querySelector(DOMstrings.inputType).value,
        description: document.querySelector(DOMstrings.inputDescription).value,
        value: parseFloat(document.querySelector(DOMstrings.inputValue).value)
      };
    },

    addListItems: function(obj, type) {
      var html, newHtml, element;

      //HTML String with Placeholder text
      if (type === 'inc') {
        element = DOMstrings.incomeContainer;
        html = '<div class="item clearfix" id="inc-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
      }
      if (type === 'exp') {
        element = DOMstrings.expenseContainer;
        html = '<div class="item clearfix" id="exp-%id%"><div class="item__description">%description%</div><div class="right clearfix"><div class="item__value">%value%</div><div class="item__percentage">21%</div><div class="item__delete"><button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button></div></div></div>';
      }
      //Replace Placeholder text with actual data
      newHtml = html.replace('%id%', obj.id);
      newHtml = newHtml.replace('%description%', obj.description);
      newHtml = newHtml.replace('%value%', obj.value);
      //Insert HTML with DOM
      document.querySelector(element).insertAdjacentHTML('beforeend', newHtml);

      //clears the input fields
      document.querySelector(DOMstrings.inputValue).value = "";
      document.querySelector(DOMstrings.inputDescription).value = ''
    },
    displayBudget: function(obj) {
      document.querySelector('.budget__value').innerHTML = obj.budget;
      document.querySelector('.budget__income--value').innerHTML = obj.totalInc;
      document.querySelector('.budget__expenses--value').innerHTML = obj.totalExp;
      document.querySelector('.budget__expenses--percentage').innerHTML = obj.percentage + "%";
    },

    deleteItemlist: function(selectID) {
      var el = document.getElementById(selectID);
      el.parentNode.removeChild(el);
    },

    getDOMStrings: function() {
      return DOMstrings;
    }
  }
})();





var Controller = (function(budgetCtrler, UICtrler) {
  //Event Listner called in the end
  var setUpEventListener = function() {
    var DOMs = UICtrler.getDOMStrings();
    document.querySelector(DOMs.addBtn).addEventListener('click', ctrlAddItem);
    document.querySelector(DOMs.container).addEventListener('click', ctrlDeleteItem);
    document.addEventListener('keypress', function(event) {
      if (event.keyCode === 13 || event.which === 13) {
        console.log("Enter is pressed");
        ctrlAddItem();
      }
    })
  }

  //All the exchange between Controllers
  var ctrlAddItem = function() {
    //Get the field input data

    var input = UICtrler.getInput();
    console.log(input);
    //creates an item to input

    if (input.description !== "" && !isNaN(input.value) && input.value > 0) {
      var newItem = budgetController.addItem(input.type, input.description, input.value);

      //displays the item in UI
      var listItem = UIController.addListItems(newItem, input.type);


      //calculate the budget and display the budget in UI

      //Calculate Budget
      budgetCtrler.calculateBudget(newItem, input.type);

      //return the budget
      var budget = budgetCtrler.getBudget();
      console.log(budget);
      //diplay the budget in UI
      UIController.displayBudget(budget);

    };

  }

  var ctrlDeleteItem = function(event) {
    var itemID, splitID, type, ID;

    itemID = (event.target.parentNode.parentNode.parentNode.parentNode.id);
    var input = UICtrler.getInput();
    var newItem = budgetController.addItem(input.type, input.description, input.value);

    if (itemID) {
      splitID = itemID.split('-');
      type = splitID[0];
      ID = parseInt(splitID[1]);
      console.log(type);
      console.log(id);

      //delete the ITEM from data structure
      budgetCtrler.deleteItem(type, ID);
      //delete the item from UI
      UICtrler.deleteItemlist(itemID);
      //displays the item in UI
    }

  }
  return {
    init: function() {
      console.log("The application have started working")
      setUpEventListener();
    }
  }
})(budgetController, UIController);

Controller.init();

Answer 1

Declare the newCalculation function outside the returned object, and assign that function to the returned objects property.

Something like below:

var budgetController = (function() {
    ...
    var newCalculation = function() {
      data.budget = data.totals.inc - data.totals.exp;
      if (data.totals.inc > 0) {
        data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100);
      } **
    };

    ...

    return {
        ...
        newCalculation: newCalculation,
        ...
    }
})();