javascript - 未捕获的 TypeError:UICtrl.addListItem 不是函数
问题描述
我已经在这里坐了整整一个小时,我不知道出了什么问题。
我是新手,请不要评价。
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 = {
allItems: {
exp: [],
inc: []
},
totals: {
exp: 0,
inc: 0
}
};
return {
addItem: function(type, des, val) {
var newItem, ID;
if (data.allItems[type].length > 0) {
ID = data.allItems[type][data.allItems[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.allItems[type].push(newItem);
return newItem;
},
addListItem: function(obj, type) {
var html, newHTML, element;
if (type === 'inc') {
element = DOMstrings.incomesContainer;
html = '<div class="item clearfix" id="income-%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>';
} else if (type === 'exp') {
element = DOMstrings.expensesContainer;
html = '<div class="item clearfix" id="expense-%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>';
}
newHTML = html.replace('%id%', obj.id);
newHTML = html.replace('%description%', obj.description);
newHTML = html.replace('%value%', obj.value);
document.querySelector(element).insertAdjacentHTML('beforeend', newHTML);
}
};
})();
var UIController = (function() {
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add__description',
inputValue: '.add__value',
inputBtn: '.add__btn',
incomesContainer: '.income__list',
expensesContainer: '.expenses__list'
};
return {
getInput: function() {
return {
type: document.querySelector(DOMstrings.inputType).value,
description: document.querySelector(DOMstrings.inputDescription).value,
value: document.querySelector(DOMstrings.inputValue).value
};
},
getDOMstrings: function() {
return DOMstrings;
}
};
})();
var controller = (function(budgetCtrl, UICtrl) {
var setupEventListeners = function() {
var DOM = UICtrl.getDOMstrings();
document.querySelector(DOM.inputBtn).addEventListener('click', ctrlAddItem);
document.addEventListener('keypress', function(event) {
if (event.keyCode === 13 || event.which === 13) {
ctrlAddItem();
}
});
};
var ctrlAddItem = function() {
var input, newItem;
input = UICtrl.getInput();
newItem = budgetCtrl.addItem(input.type, input.description, input.value);
UICtrl.addListItem(newItem, input.type);
};
return {
init: function() {
setupEventListeners();
}
};
})(budgetController, UIController);
controller.init();
addListItem 函数将不起作用。我检查了 budgetController 函数 - 没有任何可疑之处,那里没有任何问题,但是当我在控制器函数中调用它时,我在控制台中收到错误消息:
未捕获的 TypeError:UICtrl.addListItem 不是 HTMLButtonElement.ctrlAddItem (app.js:108) 处的函数
解决方案
推荐阅读
- markdown - 打印 mkdocs 生成的 html 页面会暴露链接
- image - 图像后处理失败。如果是照片或大图,请将其缩小到 2500 像素并重新上传
- php - PHP:致命错误:未捕获的错误:在布尔值上调用成员函数 execute()
- python - 我可以在没有 Restful Api 的情况下使用 Elasticsearch
- postman - 如何在邮递员中验证 JSON 数组值?
- android - 如何在android studio中的webview内画一条线
- kotlin - 为什么这个协程演示会崩溃?
- php - 究竟如何让 AST 扩展工作?
- java - 如何在 Android Studio 中每 24 小时重置一次数据结构?
- java - 为什么 Gradle 缓存目录中有数字?