如何从输入框中显示 HTML
Posted
技术标签:
【中文标题】如何从输入框中显示 HTML【英文标题】：How to display HTML from input box 【发布时间】：2020-01-30 05:29:57 【问题描述】：我正在尝试显示用户在输入框中输入一些详细信息后出现的消息。一旦他们在输入框中输入信息，页面应该将信息添加到多行文本中，然后在包含新信息的网页上显示整个消息。这段代码我只显示没有输入的消息。
在这里，我只是让用户在框中输入文本，然后我尝试通过在代码中给它一个带有值的变量名称来“解析”输入的值，以便可以将其添加为属性到“库”对象。我有更多的信息，但我什至无法正确处理这句话。
<!DOCTYPE html>
<html>
<head>
<title>Madder Libs</title>
</head>
<body>
<div id="input">
<form>
<p>
<h4>Piece of clothing:</h4><input id="cloth" type="text" value=" " />
</p>
</form>
</div>
<script>
let clothes = document.getElementById('cloth').value;
let libs =
a: clothes,
/*b: firstBodyPart,
c: secondBodyPart,
d: verbOne,
e: thirdBodyPart,
f: verbTwo,
g: firstNoun,
h: secondNoun,
i: verbThree,*/
;
let showThis = function()
let display = function(message)
let sayThis = `I wear a $message.a on sundays.`;
return sayThis;
document.getElementById('madlibs').innerHTML += "<br/>" + display(libs);
</script>
<div id="madlibs">
<button type="submit" onclick="showThis()">Show Message</button>
</div>
</body>
</html>
我希望显示我的消息，包括用户在文本框中输入的任何内容
【问题讨论】：
【参考方案1】：让我们从解决您的句子不起作用的原因开始。这只是时间问题，或者换句话说，事情何时执行。在您的代码中（结构不是很好，但稍后会添加）您执行
let clothes = document.getElementById('cloth').value;
在脚本的最开始。在这种情况下，您不会获得某种形式的参考，可以让您在稍后阶段读取值，而是读取当时的实际值。由于您的 input 字段将 value 属性设置为空字符串，因此无论您以后执行多少次函数，这都是您将得到的全部内容。
为了在调用您的方法时获取输入值您必须将其移至函数本身。
但正如我之前提到的，您的代码整体结构很差，所以请允许我提供一些建议。
button 类型的 submit 默认情况下，如果放置在表单中，则执行表单的提交；您没有利用这一点（这有利于使用“Enter”键提交表单，例如
将<script> 放在文档中间是不好的选择，因为它会阻止呈现文档的其余部分。最好的选择是在与defer 属性一起使用时将其放置在<head> 中，或者在关闭</body> 标记之前将其放置在文档末尾。
将你的函数相互嵌套在这里没有好处。您可以轻松地独立定义它们，并在需要时在另一个中调用它们。
标题元素<h4>不能出现在<p>标签内
示例
<!DOCTYPE html>
<html>
<head>
<title>Madder Libs</title>
</head>
<body>
<form action="/" onsubmit="return showThis()">
<div>
<label for="cloth">Piece of clothing:</label>
<input id="cloth" type="text" value="" />
</div>
<div id="madlibs"></div>
<div>
<button type="submit">Show Message</button>
</div>
</form>
<script>
// let's get references to our elements, so we don't have to
// do it multiple times
let clothes = document.getElementById('cloth');
let madlibs = document.getElementById('madlibs');
// let's define our functions
function display(message)
let sayThis = `I wear a $message.a on sundays.`;
return sayThis;
function showThis()
const clothesValue = clothes.value;
let libs =
a: clothesValue,
/*b: firstBodyPart,
c: secondBodyPart,
d: verbOne,
e: thirdBodyPart,
f: verbTwo,
g: firstNoun,
h: secondNoun,
i: verbThree,*/
;
madlibs.innerHTML += "<br/>" + display(libs);
return false;
</script>
</body>
【讨论】：
以上是关于如何从输入框中显示 HTML的主要内容，如果未能解决你的问题，请参考以下文章