关键词：
【中文标题】试图用实际数据替换占位符文本，但它不起作用【英文标题】：Trying to replace placeholder text with actual data, but it is not working 【发布时间】：2020-06-13 14:48:40 【问题描述】：我正在用 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;
)();
【问题讨论】：
【参考方案1】：看起来问题是您在html 上进行每个文本替换并将其保存到newHtml，覆盖先前的替换。只有您的%value% 替换才会生效。您需要使用 newHtml 来构建替换内容：
newHtml = html.replace('%id%', obj.id);
newHtml = newHtml.replace('%description%', obj.description);
newHtml = newHtml.replace('%value%', obj.value);
【讨论】：
我确实用您的建议替换了它。但是，现在我变得不确定。有什么原因可以解释为什么现在会发生这种情况？在文本字段 HTML 内对齐占位符
】在文本字段HTML内对齐占位符【英文标题】：AlignplaceholderinsidetextfieldHTML【发布时间】：2016-04-2723:01:40【问题描述】：我想在左上角移动占位符。我想要图片上的东西。我试过了::-webkit-input-placeholderleft:0px;up:0px;但它不起作用。... 查看详情
占位符在 IE9 中不起作用 [重复]
】占位符在IE9中不起作用[重复]【英文标题】：placeholdernotworkinginIE9[duplicate]【发布时间】：2012-09-1723:37:41【问题描述】：可能重复：placeholderinie9我正在为我的文本框使用占位符。问题是在Firefox和chrome中它们会显示，但在IE9中它... 查看详情
我想在 recyclerview 中显示编辑文本数据，但它不起作用
】我想在recyclerview中显示编辑文本数据，但它不起作用【英文标题】：Iwanttoshowedittextdatainrecyclerviewbutitdoesnotwork【发布时间】：2020-03-1904:39:54【问题描述】：请帮忙。当我在移动设备上运行应用程序时，如果它运行则会崩溃，然... 查看详情
如果该记录尚不存在但它不起作用，我试图仅将新记录插入数据库
】如果该记录尚不存在但它不起作用，我试图仅将新记录插入数据库【英文标题】：Iamtryingtoonlyinsertanewrecordintothedatabaseifthatrecorddoesn\'talreadyexistbutitisn\'tworking【发布时间】：2016-07-0810:53:44【问题描述】：这是我的代码，用于在将... 查看详情
javascript用实际参数替换路径占位符。(代码片段)
试图为 UITextfield 宽度约束设置动画，但它不起作用
】试图为UITextfield宽度约束设置动画，但它不起作用【英文标题】：TryingtoanimateUITextfieldwidthconstraint,butitwon\'twork【发布时间】：2019-10-1120:03:46【问题描述】：我正在尝试为UITextfield的宽度约束设置动画，我想要实现的是在动画时... 查看详情
试图在每 1 分钟后执行一项工作，但它不起作用？
】试图在每1分钟后执行一项工作，但它不起作用？【英文标题】：Tryingtomakeajobtobeexecutedaftereach1minute,butitsnotworking?【发布时间】：2010-05-0208:39:22【问题描述】：我做了这个工作，应该每隔1分钟执行一次，但它不起作用。当我使... 查看详情
试图在 Python 脚本中复制文件，但它不起作用
】试图在Python脚本中复制文件，但它不起作用【英文标题】：TryingtocopyafileinPythonscript,butitdoesn\'twork【发布时间】：2016-04-2715:11:43【问题描述】：我正在尝试将文件(image.jpg)从文件夹“src”复制到文件夹“dst”，但出现错误：Traceb... 查看详情
用于单选的所选插件的占位符文本不起作用
】用于单选的所选插件的占位符文本不起作用【英文标题】：placeholdertextforchosenpluginforsingleselectnotworking【发布时间】：2013-12-1015:01:02【问题描述】：我在我的代码中实现了单选插件。我正在尝试为搜索框添加占位符文本，但我... 查看详情
试图为不和谐制作一个聊天机器人，但它不起作用
】试图为不和谐制作一个聊天机器人，但它不起作用【英文标题】：Triedtomakeachatbotfordiscordbutitdoesn\'twork【发布时间】：2021-09-1120:33:44【问题描述】：我正在使用python(discord.py)开发一个不和谐的机器人。我试图为我的机器人发出... 查看详情
我试图总结给定数组中的数字，使用 recursion ，尝试了这段代码，但它不起作用。为啥？
】我试图总结给定数组中的数字，使用recursion，尝试了这段代码，但它不起作用。为啥？【英文标题】：I\'mtryingtosumupthenumbersinagivenarray,usingrecursion,triedthiscodebutitisn\'tworking.Why?我试图总结给定数组中的数字，使用recursion，尝试了... 查看详情
试图告诉 TypeScript 忽略 node_modules，但它不起作用。你能帮我吗？
】试图告诉TypeScript忽略node_modules，但它不起作用。你能帮我吗？【英文标题】：TryingtotellTypeScripttoignorenode_modules,butit\'snotworking.Canyouhelpmeout?【发布时间】：2021-09-0916:52:05【问题描述】：我的tsconfig："compilerOptions":"esModuleInterop":tru... 查看详情
占位符和 IE ！= BFF（占位符和 IE9 不起作用）
...ng)【发布时间】：2013-09-2814:45:02【问题描述】：所以，我试图让占位符属性在IE9及更低版本中工作。但是，我的行为很奇怪（请参见下面的屏幕截图）。找到thiswebsite，决定使用下面的JS代码：JS：//Checksbrowsersupportforthe 查看详情
尝试使用点符号在控制台中记录数据对象但它不起作用，为啥？
...：我有一个使用Graphql和Mongo的React项目。进行查询时，我试图通过点符号在控制台中记录返回 查看详情
CSS：输入占位符在Mozilla中不起作用后
】CSS：输入占位符在Mozilla中不起作用后【英文标题】：CSS:afterinputplaceholdernotworkinginmozilla【发布时间】：2012-10-0120:16:37【问题描述】：我想在我的文本输入占位符中放一个小图标就在占位符文本结束的地方<inputtype="text"placeholde... 查看详情
我正在尝试设置角色命令和设置频道命令。我试图这样做，但它不起作用
】我正在尝试设置角色命令和设置频道命令。我试图这样做，但它不起作用【英文标题】：I\'mtryingtomakeasetrolecommandandasetchannelcommand.I\'veattemptedtodoitbutitdoesn\'twork【发布时间】：2021-09-0704:51:50【问题描述】：所以发生的事情是，我... 查看详情
如何在 textarea 中添加多行占位符文本？
】如何在textarea中添加多行占位符文本？【英文标题】：Howtoaddmultilineplaceholdertextintextarea?【发布时间】：2016-09-2302:31:52【问题描述】：.我得到了一个类似以下的解决方案，但它在mossilla，safari中不起作用。Chrome就是这样工作的..$... 查看详情
试图将 ViewController 中的字符串传递给 NSObject 中的字符串 .. 但它不起作用
】试图将ViewController中的字符串传递给NSObject中的字符串..但它不起作用【英文标题】：TryingtopassastringinaViewControllertoastringinaNSObject..butitdosn\'twork【发布时间】：2011-05-0300:37:55【问题描述】：嗨，我试图将ViewController中的NSString传递... 查看详情