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

Having problems with my very basic HTML static page generator

本文关键字：问题 非常 静态 HTML 我的      更新时间：2023-09-26

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

我需要有关获取 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>
我

不是想让你为我完成这个，而只是一点点指导。谢谢。

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

您需要涉及其他内容，例如 URL 或本地存储：https://stackoverflow.com/a/35027577/5941574

查询参数

一种选择是发出 GET 请求，以使用您希望在请求中作为查询参数包含的任何值进行newPage.html。然后 newPage.html 将包含一个脚本，该脚本解析 URL 以获取参数，并根据它在 URL 中找到的值构建 HTML 并将其插入到文档中。

本地存储或饼干

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

服务器端

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

相关文章：