Question

嗨，所以我想为自己准备一个工具，以便在我撰写的论文中使用，并将其内容放在一些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带有所有代码（我要存储在其他地方的页面内容除外）来做到这一点。我不确定我是否正确处理此方法，因此可以接受任何帮助。谢谢！

Answer 1

您是否要将模板与输入内容结合起来并显示在finalcontent中？这就是你的方法。

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>

Javascript：接受将其置于两个变量之间的输入并输出

1 个答案: