开发者问题收集

未捕获的类型错误:无法读取未定义的属性“长度”……?

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