Попытка заменить текст заполнителя фактическими данными, но это не работает - PullRequest
Новая
       25

Попытка заменить текст заполнителя фактическими данными, но это не работает

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

Я создаю простое бюджетное приложение в JS. Прямо сейчас я могу успешно ввести расходы или доход и отобразить их в пользовательском интерфейсе. Тем не менее, описание не появляется, а заполнитель текста. enter image description here. Может кто-нибудь знает почему?

Ниже контроллер UI. Я создал строку HTML с текстом заполнителя. Затем я пытался заменить текст заполнителя некоторыми фактическими данными, которые в данном случае являются описанием расходов. Затем я попытался вставить HTML в дом. 

var UIController = (function(){
    var DOMstrings = {
        inputType: '.add__type',
        inputDescription: '.add__description',
        inputValue: '.add__value',
        inputBtn: '.add__btn',
        incomeContainer: '.income__list', 
        expensesContainer: '.expenses__list'
    };
    return {
        getInput: function(){
            return {
             type: document.querySelector(DOMstrings.inputType).value, //Will be either inc (income) or exp (expense)
             description: document.querySelector(DOMstrings.inputDescription).value,
             value: document.querySelector(DOMstrings.inputValue).value
            };
        },
        addListItem: function(obj, type){
            var html, newHtml, element;
            //create HTML string with some 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.expensesContainer;
            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__percentage">21%</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 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;
        }
    }

})();

1 Ответ

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

Похоже, проблема в том, что вы выполняете каждую замену текста на html и сохраняете ее в newHtml, отменяя предыдущую замену. Только ваша замена %value% вступит в силу. Вам нужно использовать newHtml для создания контента с заменой: 

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