【发布时间】：2017-08-08 23:10:19
【问题描述】：
我正在寻找一种方法来格式化 JS 对象的输出。我尝试使用与 PersonD 一致的 html，但它会与文本一起打印 html。解决此问题的最佳方法是什么？
<html>
<head>
<title>Extension Search</title>
</head>
<body>
<div>
<p>
Extension Search
</p>
</div>
<p>
<form autocomplete="off">
<input id="thisSearch" type="text" placeholder="enter name">
<button id="linkToJS">Run</button>
<textarea id="output" name="output" wrap="hard" rows="10" readonly>
</textarea>
<br><br>
</form>
</p>
</body>
<script type="text/javascript">
var extensionList = {
PersonA: 'This is person A ext_100',
PersonB: 'This is person B ext_200',
PersonC: 'This is person C ext_300 & PersonC Cell Phone ####',
PersonD: ' \ <b>This is person D ext_400 <br> PersonD Cell Phone ####</b> \ ',
};
document.addEventListener('DOMContentLoaded', function() {
var link =
document.getElementById('linkToJS').addEventListener("click", returnLookUp);
});
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value =
extensionList[thisSearch.value];
}
</script>
</html>
验收标准 使用 html 格式化 JavaScript 对象的输出。
如“PersonD”所示，我想使用 html 将我的输出格式化到文本区域。根据以下响应，它看起来不像一个选项。 Can I embed HTML formatting inside of a <textarea> tag?
我尝试打印到 div，但没有任何运气。 Can I embed HTML formatting inside of a <textarea> tag?
<body>
<div>
<p>
Extension Search
</p>
</div>
<p>
<form autocomplete="off">
<input id="thisSearch" type="text" placeholder="enter name">
<button id="linkToJS">Run</button>
<br><br>
</form>
<div id="output" name="output"></div>
</p>
</body>
<script type="text/javascript">
var extensionList = {
PersonA: 'This is person A ext_100',
PersonB: 'This is person B ext_200',
PersonC: 'This is person C ext_300 & PersonC Cell Phone ####',
PersonD: ' \ <b>This is person D ext_400 <br> PersonD Cell Phone ####</b> \ ',
};
document.addEventListener('DOMContentLoaded', function() {
var link =
document.getElementById('linkToJS').addEventListener("click", returnLookUp);
});
var returnLookUp = function(e) {
e.preventDefault();
var getInfo = document.getElementById("thisSearch");
document.getElementById("output").value =
extensionList[thisSearch.value];
}
</script>
【问题讨论】：
-
问题是什么？
-
我正在寻找一种方法来格式化 JS 对象的输出。我尝试使用与 PersonD 一致的 html，但它会打印 html 以及文本。
-
文本是否需要进入文本区域？你能把它放在页面上的里面吗？可能不完全相关，但有一些不好的做法。
thisSearch似乎只是突然出现在某个地方。虽然它是在window上定义的（作为具有 id 的元素），但您应该改用getInfo。更相关的是，在第二个 sn-p 中，您设置了div的值，但是，value是 div 的自定义属性，请改用innerHTML。您需要编辑问题以包含您的预期结果。就目前而言，这里没有问题，也没有迹象表明“使用 html 格式化 JavaScript 对象的输出”应该是什么样子。
标签： javascript html format output textarea