代码之家  ›  专栏  ›  技术社区  ›  billy

Uncaught TypeError:无法读取未定义…?

  •  0
  • billy  · 技术社区  · 6 年前

    我知道有人问我这个问题。但我不知道为什么我还是会犯这个错误。

    Ucaught TypeError: Cannot read property 'length' of undefined
        at Object.addItem
    

    我不知道长度是如何定义的,当我检查它是否大于0时,我是否没有访问 data 对象是否正确?

    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 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 回复  |  直到 6 年前
        1
  •  2
  •   jh314    6 年前

    看起来像是变量 input input = UICtrl.getinput() ),具有属性 .type exp 也不是 inc ,或者没有 .类型 undefined ).

    那会导致 data.allItems[type] 成为 ,和 未定义 length .

        2
  •  0
  •   Halvor Blindheim    6 年前

    起始文件夹中的Index.html文件与项目的最终文件夹之间存在差异。因此,在第44行和第45行starter文件夹的index.html文件中,出于某种原因,它将“inc”改为“inc”,将“exp”改为“expenses”。

    <option value="income" selected>+</option> 
    <option value="expenses">-</option>
    

    因此,打开html文件并将上面的内容更改为:

    <option value="inc" selected>+</option>
    <option value="exp">-</option>