未捕获的类型错误:无法读取未定义的属性“长度”……?
2018-08-20
1914
我意识到有人问了这个问题。但我不确定为什么我仍然会收到此错误。
Ucaught TypeError: Cannot read property 'length' of undefined at Object.addItem
我不明白长度为何未定义,当我检查它是否大于 0 时,我是否没有正确访问
data
对象?
我有一个预算控制器 IIFE,它有一个返回
addItem
函数。在此函数中,我在此行收到错误:
if (data.allItems[type].length > 0) {
这是完整函数。
// BUDGET CONTROLLER
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;
//[1 2 3 4 5], next ID = 6
//[1 2 4 6 8], next ID = 9
// ID = last ID + 1
// Create new ID
if (data.allItems[type].length > 0) {
ID = data.allItems[type][data.allItems[type].length - 1].id + 1;
} else {
ID = 0;
}
// Create new item based on 'inc' or 'exp' type
if (type === 'exp') {
newItem = new Expense(ID, des, val);
} else if (type === 'inc') {
newItem = new Income(ID, des, val);
}
// Push it into our data structure
data.allItems[type].push(newItem);
// Return the new element
return newItem;
},
testing: function() {
console.log(data);
}
}
})();
我也在这里调用它。
var ctrlAddItem = function() {
var input, newItem;
// 1. Get the FIELD input data
input = UICtrl.getinput();
// 2. Add the item to the budget controler
newItem = budgetCtrl.addItem(input.type, input.description, input.value);
// 3. add the item to the UI
// 4. Calculate the budget
// 5. Display the budget on the UI
}
UI 控制器 - 我在哪里获取输入。
// UI CONTROLLER
var UIController = (function() {
// some code
var DOMstrings = {
inputType: '.add__type',
inputDescription: '.add__description',
inputValue: '.add__value',
inputBtn: '.add__btn'
}
return {
getinput: function() {
// will be either inc or exp
return {
type: document.querySelector(DOMstrings.inputType).value,
description: document.querySelector(DOMstrings.inputDescription).value,
value: document.querySelector(DOMstrings.inputValue).value
}
},
getDOMstrings: function() {
return DOMstrings;
}
}
})();
// GLOBAL APP CONTROLLER
var controller = (function(budgetCtrl, UICtrl) {
var setupEventListerners = 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;
// 1. Get the FIELD input data
input = UICtrl.getinput();
// 2. Add the item to the budget controler
newItem = budgetCtrl.addItem(input.type, input.description, input.value);
// 3. add the item to the UI
// 4. Calculate the budget
// 5. Display the budget on the UI
}
return {
init: function() {
console.log('application start');
setupEventListerners();
}
}
})(budgetController, UIController);
controller.init();
有什么想法吗?
2个回答
看起来变量
input
(来自
input = UICtrl.getinput()
)具有属性
.type
,但它不是
exp
也不是
inc
,或者没有
.type
(即
undefined
)。
这会导致
data.allItems[type]
为
undefined
,而
undefined
没有
length
。
jh314
2018-08-20
项目的 Starter 文件夹和 Final 文件夹中的 Index.html 文件存在差异。因此,在 starter 文件夹的 index.html 文件的第 44 行和第 45 行中,出于某种原因,它显示的是“income”而不是“inc”,并且显示的是“exp”而不是“expenses”。
<option value="income" selected>+</option>
<option value="expenses">-</option>
因此,打开 html 文件并将上述内容更改为:
<option value="inc" selected>+</option>
<option value="exp">-</option>
Halvor Blindheim
2018-10-25