我的基本HTML静态页面生成器出现问题

时间:2016-02-24 14:18:11

标签: javascript html

我正在尝试从表单和一些javascript创建一个新的HTML页面。表格比这长得多,但我想如果我给你们2个文字输入,我可以从那里拿走它。我遇到了一个问题,我无法检索表单的值并将其发送到我的新页面。我的新页面不会显示任何内容,因为它认为我的表单是空的,或者它们不可能存在。这可能是它返回undefined的原因。我完全被困在这里,我不知道该做什么,只要从我的表单设置新页面就可以了。

我需要帮助让newPage.html显示我的标题和副标题。

这是js:

var title = document.createElement("h1");
var titleForm = document.getElementById("title");
var subTitle = document.createElement("h3");
var subtitleForm = document.getElementById("subtitle");
var myDiv = document.getElementById("container");
function getElements() {
    //set the title
   var titleNode = document.createTextNode(titleForm.value);
   title.appendChild(titleNode);

   //set the subtitle optionally
   var subtitleNode = document.createTextNode(subtitleForm.value);
   subTitle.appendChild(subtitleNode);
}

以下是原始HTML页面:

<body>
<h1>Create A New Webpage Using This Form</h1>
<form id="form">
    <label>
        Title: 
        <input type="text" name="title" id="title" value="title">
    </label><br><br>
    <label>
        Subtitle:  
        <input type="text" name="subtitle" id="subtitle" value="subtitle">
    </label><br><br>
    <input type="button" value="Generate Page" onclick="window.open('newPage.html');">
</form>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>getElements();</script>
</body>

以下是我要创建的页面:

<body>
<div id="container">
<ul id="myList"></ul></div>
<script type="text/javascript" src="pageGenerator.js"></script>
<script>setElements();</script>
</body>

我没有找你为我完成这个,但只是一点指导。感谢。

1 个答案:

答案 0 :(得分:0)

听起来您希望一个页面上的JavaScript可以从另一个页面上的JavaScript中读取。这本身是不可能的。您无法在var a = 1上定义somePage.html,然后在用户的浏览器加载newPage.html时读取该变量。

您需要涉及其他内容,例如网址或本地存储空间:https://stackoverflow.com/a/35027577/5941574

查询参数

一个选项是向newPage.html发出GET请求,其中包含您要包含的任何值作为请求中的查询参数。然后newPage.html将包含一个脚本,该脚本解析URL以获取参数,并根据在URL中找到的值构建HTML并将其插入到文档中。

本地存储或Cookie

这与其他方法的工作方式几乎相同,只是不是从URL获取值,而是使用cookie或本地存储保存到用户的计算机。

服务器端

第三种选择当然是将用户的选择发送到服务器并让服务器构建并提供结果页面。