Невозможно установить значение описания списка в поле ввода в пользовательском интерфейсе - PullRequest
Новая
       50

Невозможно установить значение описания списка в поле ввода в пользовательском интерфейсе

0 голосов
/ 07 марта 2020

Я учусь JavaScript и в настоящее время на веб-сайте проекта по созданию приложения бюджета. Я был на полпути, но тогда я столкнулся с проблемой. Я не могу установить значение описания списка в поле ввода. Что это за список? Содержит такие вещи, как доходы или расходы (описание и стоимость). Список и приложение, которое я создаю . Теперь я реализовал функцию добавления элемента в список, когда нажимаю клавишу «Ввод» или нажимаю ✅, когда дал ему тип (+ или -), и ввел описание и значение. Он добавляет элемент в список, но не меняет описание, как написано в поле ввода описания. В консоли нет ошибок. Посмотрите, что происходит в моем приложении . Справка!

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>

1 Ответ

0 голосов
/ 08 марта 2020

Изменения даны только в «значении», потому что функция replace не изменяет исходную строку , поэтому вы должны использовать такую ​​функцию: 

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