Question

有人可以在代码笔中检查我的代码吗？将项目添加到列表后，它应该将总预算记录在控制台中。

它仅显示0。请在codePen控制台中查看代码。 https://codepen.io/crazydeveloper/pen/KbKvMp

budCalc: function() {
var budget, percent, totalInc, totalExp;

totalInc = data.totals.inc;
totalExp = data.totals.exp;

budget = data.totals.inc - data.totals.exp;
percent = (data.totals.exp / data.totals.inc)*100
console.log(budget);


///////// BUDGET CONTROLLER ////////
var budgetController = (function() {

var Expence = function(id, des, value) {
this.id = id;
this.des = des;
this.value = value;
}

var Income = function(id, des, value) {
this.id = id;
this.des = des;
this.value = value;
}

var data = {
allItems: {
    inc: [],
    exp: []
},

totals: {
    inc: 0,
    exp: 0,
    budget: 0,
    percent: 0
}

}

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

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

    if (type === "exp") {
        newItem = new Expence(id, des, val);
    } else if (type === "inc") {
        newItem = new Income(id, des, val);
    }

    data.allItems[type].push(newItem);
    return newItem;
},

calcTotal: function(type) {
    sum = 0;
    data.allItems[type].forEach(function() {
        sum += data.totals[type];
        data.totals[type] = data.totals[type] + sum;
    }
)
},

budCalc: function() {
var budget, percent, totalInc, totalExp;

totalInc = data.totals.inc;
totalExp = data.totals.exp;

budget = data.totals.inc - data.totals.exp;
percent = (data.totals.exp / data.totals.inc)*100
console.log(budget);

var getBudget = function() {
    return {
        totalInc: totalInc,
        totalExp: totalExp,
        totalBudget: budget,
        percent: percent
    }
}
},
    testing: function() {
    console.log(data);
}
}
}());




////////// UI CONTROLLER //////////////
var UIController = (function() {
var DOMs = {
inpType: ".add__type",
inpDes: ".add__description",
inpVal: ".add__value",
inpBtn: ".add__btn",
incCon: ".income__list",
expCon: ".expenses__list"
}
return {
    getInp: function() {
        return {
            type: $(DOMs.inpType).val(),
            des: $(DOMs.inpDes).val(),
            val: parseFloat($(DOMs.inpVal).val())
        }
    },

    addListItem: function(obj, type) {
        var html, newHTML, ele;

        if(type === "inc") {
            ele = DOMs.incCon;
            html = '<div class="item clearfix" id="income-%id%"><div 
class="item__description">%des%</div><div class="right clearfix"><div 
class="item__value">+ %val%</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") {
            ele = DOMs.expCon;
            html = '<div class="item clearfix" id="expense-%id%"><div 
class="item__description">%des%</div><div class="right clearfix"><div 
class="item__value">- %val%</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 = newHTML.replace("%des%", obj.des);
        newHTML = newHTML.replace("%val%", obj.value);

        $(ele).append(newHTML);

        this.clearFields();

    },

    clearFields: function() {
        $(DOMs.inpDes).add(DOMs.inpVal).val("");
        $(DOMs.inpDes).focus();
    },

    getDOM: function() {
        return DOMs;
    }
    }
}
());


////////// MAIN CONTROLLER /////////
var controller = (function(budgetCtrl, UICtrl) {

var eventLis = function() {
    var DOM = UICtrl.getDOM();
    $(DOM.inpBtn).on("click", eventBtn);

    $("html").on("keypress", function() {
    if (event.keyCode === 13 || event.which == 13) {
    eventBtn();
    }
})
}

function eventBtn() {
var input = UICtrl.getInp();

if(input.des !== "" && !isNaN(input.val) && input.val > 0) {
    var newItem = budgetCtrl.addItem(input.type, input.des, input.val);
    UICtrl.addListItem(newItem, input.type);
}
budgetCtrl.budCalc();
}

return {
    init: function() {
        console.log("Application started!");
        eventLis();
    }
}

})(budgetController, UIController);

controller.init();

这是所有JavaScript代码。但是我能弄清楚为什么我的预算没有更新？

Answer 1

如果此时检查完整的数据结构对象

budCalc: function() {
var budget, percent, totalInc, totalExp;

//here
console.log(data);

totalInc = data.totals.inc;
totalExp = data.totals.exp;

budget = data.totals.inc - data.totals.exp;
percent = (data.totals.exp / data.totals.inc)*100
}

您将看到data.total属性每次都设置为零

为什么总预算没有更新？

1 个答案: