我正在尝试显示一条消息，该消息在用户将一些详细信息输入到输入框中后出现。一旦他们在输入框中输入信息，页面应将信息添加到多行文本中，然后在网页上显示包含新信息的整个消息。我仅使用此代码显示消息而没有输入。
[这里，我只是让用户在框中输入文本，然后我尝试通过在代码中给它一个变量名称和值来“解析”输入的值，以便可以将其作为属性添加到“库”对象。我对邮件有更多了解，但我什至无法正确理解这一句话。
<!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>
我希望显示我的消息，包括用户在文本框中输入的内容
让我们先解决为什么您的句子不起作用。这仅仅是时间问题，或者换句话说，什么时候执行。在您的代码（结构不太好，但稍后再介绍）中，执行
let clothes = document.getElementById('cloth').value;
在脚本的开头。在这种情况下，您将无法获得某种形式的参考，从而无法在稍后阶段读取值，但可以读取当时的实际值。由于input字段的value属性设置为空字符串，所以无论以后执行该函数多少次，都可以得到这一切。
为了在调用方法时获得输入的值您必须将其移入函数本身。
但是正如我前面提到的，您的代码总体结构较差，因此请允许我提供一些建议。
button类型为Submit，如果放置在表单中，则默认执行该表单的提交；您没有利用这一点（这具有通过“ Enter”键提交表单的能力，例如[
将<script>放置在文档中间是不理想的选择，因为它会阻止其余文档的呈现。最佳选择是将其与<head>属性一起使用时，将其放置在defer内，或者在关闭</body>标签之前将其放置在文档的末尾。
在彼此之间嵌套您的功能在这里没有好处。您可以轻松地独立定义它们，并在需要时在另一个中调用它们。