如何从输入框中显示 HTML答案

【问题标题】：How to display HTML from input box如何从输入框中显示 HTML
【发布时间】：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>

我希望显示我的消息，包括用户在文本框中输入的任何内容

【问题讨论】：

标签： forms submit innerhtml string-interpolation

【解决方案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>

【讨论】：