Javascript 试图用实际数据替换占位符文本，但无效

我正在用JS构建一个简单的预算应用程序。现在，我能够成功地输入费用或收入，并将其显示在UI中。但是，不会显示说明，而是显示占位符文本。有人知道为什么吗

下面是UI控制器。我创建了一个带有占位符文本的HTML字符串。接下来，我试图用一些实际数据替换占位符文本，在本例中，这些数据是对费用的描述。然后我尝试将HTML插入dom

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

})();

var UIController=（函数（）{
var DOMstrings={
输入类型：'.添加类型'，
inputDescription:'。添加描述'，
inputValue:'。添加值'，
输入btn:'。添加\u btn'，
incomeContainer:“.收入清单”，
费用容器：“.费用清单”
};
返回{
getInput:function（）{
返回{
类型：document.querySelector（DOMstrings.inputType）.value，//将是inc（收入）或exp（费用）
说明：document.querySelector（DOMstrings.inputDescription）.value，
值：document.querySelector（DOMstrings.inputValue）.value
};
},
addListItem:函数（对象，类型）{
var-html，newHtml，元素；
//创建带有占位符文本的HTML字符串
如果（类型=='inc'）{
element=domastrings.incomeContainer；
html=`%description%
%价值%
`;
}else if（type==='exp'）{
元素=DOMstrings.expensesContainer；
html=`%description%
%价值%21%
`;
}
//用实际数据替换占位符文本
newHtml=html.replace（“%id%”，obj.id）；
newHtml=html.replace（“%description%”，obj.description）；
newHtml=html.replace（“%value%”，obj.value）；
//将HTML插入DOM
document.querySelector（element.insertAdjacentHTML（'beforeend'，newHtml）；
},
getDOMstrings:function（）{
返回字符串；
}
}
})();

问题似乎在于您在

html

上执行每个文本替换，并将其保存到

newHtml

，覆盖先前的替换。只有您的

%value%

替换将生效。您需要使用

newHtml

来构建包含替换内容的内容：

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

---

我确实用你的建议取代了它。然而，现在我变得不明确了。有什么原因可以解释为什么现在会发生这种情况？