Javascript：将输入放在两个变量之间并输出

debugcn 发表于 Dev

卡斯佩尔

嗨，所以我正在尝试为自己制作一个工具，以便在我写的一些文章中使用它，它将该内容放在一些 HTML 代码之间并吐出一些 HTML 代码，我可以将其复制并粘贴到 .html 文件中并放在我的网络服务器。

<!DOCTYPE html>
<html>
    <head>
        <title>Work in Progress</title>
    </head>
    <body>
        <script>
function formChanged() {
var template1, content, template2;
template1 = "&lt;!DOCTYPE html&gt;&lt;html lang=\"en\"&gt;&lt;head&gt;&lt;title&gt;Post&lt;/title&gt;&lt;meta charset=\"utf-8\"&gt;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;&lt;link href=\"https://fonts.googleapis.com/css?family=Niramit\" rel=\"stylesheet\"&gt;&lt;style&gt;*{box-sizing:border-box;font-family: 'Niramit',Arial,Helvetica, sans-serif;}body{margin: 0;font-family: 'Niramit',Arial,Helvetica, sans-serif;}.topnav {overflow: hidden; background-color:#333;}.topnav a {float: left; display: block; color: #2f2f2f; text-align: center; text-decoration: none;}.content {background-color: #ddd; padding: 10px;}.footer {background-color: #f1f1f1; padding: 20px; text-align: center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=\"topnav\"&gt;&lt;a href=\"index.html\"&gt;Main Menu&lt;/a&gt;&lt;/div&gt;&lt;div class=\"content\"&gt;&lt;p&gt;";
template2 = "&lt;/p&gt;&lt;/div&gt;&lt;div class=\"footer\"&gt;&lt;p&gt;Hi my name is Casper, I am an aspiring developer.&lt;/p&gt;&lt;p&gt;If you're reading this then this was made using my first project.&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;";
    var finalcontent = template1 + content + template2;
    var content = document.getElementsByName("finalcontent")[0].value;

}
</script>
        <form onsubmit="myFunction(this)">
            <input type="text" name="content"/>
            <input type="submit" value="Submit">
            <p id="finalcontent"></p>
        </form>
    </body>
</html>

我知道我的代码不是最干净的，虽然我专注于让它工作的地方，我明白发生了什么

这就是我现在所拥有的。我试图通过让 template1 和 template2 包含除我想存储在其他地方的页面内容之外的所有代码来做到这一点。我不确定我是否正确地处理了这个问题，所以任何帮助都被接受。谢谢！

莫瑞奇

您是否尝试将模板与您的输入内容结合并显示在最终内容中？这就是你如何做到的。

function formChanged(form) {
var template1, content, template2;
template1 = "&lt;!DOCTYPE html&gt;&lt;html lang=\"en\"&gt;&lt;head&gt;&lt;title&gt;Post&lt;/title&gt;&lt;meta charset=\"utf-8\"&gt;&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;&lt;link href=\"https://fonts.googleapis.com/css?family=Niramit\" rel=\"stylesheet\"&gt;&lt;style&gt;*{box-sizing:border-box;font-family: 'Niramit',Arial,Helvetica, sans-serif;}body{margin: 0;font-family: 'Niramit',Arial,Helvetica, sans-serif;}.topnav {overflow: hidden; background-color:#333;}.topnav a {float: left; display: block; color: #2f2f2f; text-align: center; text-decoration: none;}.content {background-color: #ddd; padding: 10px;}.footer {background-color: #f1f1f1; padding: 20px; text-align: center;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=\"topnav\"&gt;&lt;a href=\"index.html\"&gt;Main Menu&lt;/a&gt;&lt;/div&gt;&lt;div class=\"content\"&gt;&lt;p&gt;";
template2 = "&lt;/p&gt;&lt;/div&gt;&lt;div class=\"footer\"&gt;&lt;p&gt;Hi my name is Casper, I am an aspiring developer.&lt;/p&gt;&lt;p&gt;If you're reading this then this was made using my first project.&lt;/p&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;";

    var content = form.content.value;
    var finalcontent = template1 + content + template2;
    document.getElementById("finalcontent").innerHTML = finalcontent;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Work in Progress</title>
    </head>
    <body>

        <form onsubmit="formChanged(this);return false;">
            <input type="text" name="content"/>
            <input type="submit" value="Submit">
            <p id="finalcontent"></p>
        </form>
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。