无法将列表的描述值设置为 UI 中的输入字段

Unable to Set the description value of a List to an Input Field in UI

我正在学习 JavaScript,目前正在进行一个制作预算应用程序的网站项目。我已经完成了一半,但那时我遇到了一个问题。我无法将列表的描述值设置为输入字段。这是什么清单:它包含收入或支出(描述和价值)等内容。 The List and the App i'm making. Now, I implemented the functionality to add an item to the List when I hit Enter or click the ✅ when I have gave it the type (+ or -), and entered the description and value. It adds the item to the list but it doesn't change the description as written in the description input field. There are no errors in the console. See whats happening in my Application。求助!

Javascript 文件:

// *****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;

        // 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);
    }
};

}) ();


// *****UI Controller*****
var UIController = (function () {

var DOMStrings = {
    inputType: '.add__type',
    inputDescription: '.add__description',
    inputValue: '.add__value',
    inputBtn: '.add__btn',
    incomeContainer: '.income__list',
    expenseContainer: '.expenses__list'
};

return {
    getInput: function() {
        return {
            type: 
document.querySelector(DOMStrings.inputType).value,
            description: 
document.querySelector(DOMStrings.inputDescription).value,
            value: 
document.querySelector(DOMStrings.inputValue).value
        };
    },

    addListItem (obj, type) {
        var html, newHtml, element;

        // Create HTML string with placeholder text
        if (type === 'inc') {
            element = DOMStrings.incomeContainer;   

            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.expenseContainer;

            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__delete"><button class="item__delete--btn"><i 
class="ion-ios-close-outline"></i></button></div></div></div>';
        }

        // Replace the placeholder text with some actual data
        newHtml = html.replace('%id%', obj.id);
        newHtml = html.replace('%description%', obj.description);
        newHtml = html.replace('%value%', obj.value);

        // Insert the HTML into the DOM

document.querySelector(element).insertAdjacentHTML('beforeend', 
newHtml);
    },

    getDOMstrings: function () {
        return DOMStrings;
    }
};

}) ();


// *****App Controller*****
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;

    // Get the Field input data
    input = UICtrl.getInput();

    // Add the item to the Budget Controller
    newItem = budgetCtrl.addItem(input.type, input.description, 
input.value);

    // Add the item to the UI
    UICtrl.addListItem(newItem, input.type);

    // Calculate the Budget

    // Display the Budget on the UI

};

return {
    init: function() {
        console.log("Application has started");
        setupEventListeners();
    }
}



}) (budgetController, UIController);

controller.init();

HTML 文件:

<body>
    <div class="top">
        <div class="budget">
            <div class="budget__title">
                Available Budget in <span class="budget__title--month">%Month%</span>:
            </div>

            <div class="budget__value">+ 2,345.64</div>

            <div class="budget__income clearfix">
                <div class="budget__income--text">Income</div>
                <div class="right">
                    <div class="budget__income--value">+ 4,300.00</div>
                    <div class="budget__income--percentage">&nbsp;</div>
                </div>
            </div>

            <div class="budget__expenses clearfix">
                <div class="budget__expenses--text">Expenses</div>
                <div class="right clearfix">
                    <div class="budget__expenses--value">- 1,954.36</div>
                    <div class="budget__expenses--percentage">45%</div>
                </div>
            </div>
        </div>
    </div>



    <div class="bottom">
        <div class="add">
            <div class="add__container">
                <select class="add__type">
                    <option value="inc" selected>+</option>
                    <option value="exp">-</option>
                </select>
                <input type="text" class="add__description" placeholder="Add description">
                <input type="number" class="add__value" placeholder="Value">
                <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
            </div>
        </div>

        <div class="container clearfix">
            <div class="income">
                <h2 class="icome__title">Income</h2>

                <div class="income__list">

                    <!--
                    <div class="item clearfix" id="income-0">
                        <div class="item__description">Salary</div>
                        <div class="right clearfix">
                            <div class="item__value">+ 2,100.00</div>
                            <div class="item__delete">
                                <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                            </div>
                        </div>
                    </div>

                    <div class="item clearfix" id="income-1">
                        <div class="item__description">Sold car</div>
                        <div class="right clearfix">
                            <div class="item__value">+ 1,500.00</div>
                            <div class="item__delete">
                                <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                            </div>
                        </div>
                    </div>
                    -->

                </div>
            </div>



            <div class="expenses">
                <h2 class="expenses__title">Expenses</h2>

                <div class="expenses__list">

                    <!--
                    <div class="item clearfix" id="expense-0">
                        <div class="item__description">Apartment rent</div>
                        <div class="right clearfix">
                            <div class="item__value">- 900.00</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>

                    <div class="item clearfix" id="expense-1">
                        <div class="item__description">Grocery shopping</div>
                        <div class="right clearfix">
                            <div class="item__value">- 435.28</div>
                            <div class="item__percentage">10%</div>
                            <div class="item__delete">
                                <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                            </div>
                        </div>
                    </div>
                    -->

                </div>
            </div>
        </div>


    </div>

    <script src="app.js"></script>
</body>

变化只在"value"中给出,因为the replace function doesn't modify the original string,所以你必须这样使用函数:

newHtml = html.replace('%id%', obj.id).replace('%description%', obj.description).replace('%value%', obj.value);