所以我有两个 html 文件，它们都链接到另一个并共享相同的 css/js 文件答案

【问题标题】：So I have two html files and they are both linked to another another and share the same css/js file所以我有两个 html 文件，它们都链接到另一个并共享相同的 css/js 文件
【发布时间】：2022-02-09 23:33:30
【问题描述】：

所以我有两个 html 文件，它们都链接到另一个并共享相同的 css/js 文件。当我在一个 index.html 上使用 btn 并单击它时，我希望它返回附加内容到 index2.html 上的部分/div。我有代码，但由于某种原因，当我运行它时出现错误，所以我 console.logged 它并返回 null。如何访问另一个 html 文件中的元素，我需要将其导入 js 吗？索引：

<a href="index.html">home</a>
    <a href="test.html">test</a>

    <button class="btn" onclick="add()">addP</button>

索引2：

 <a href="index.html">home</a>
    <a href="test.html">test</a>


    <h1>add p below </h1>


    <div class="pbox">

    </div>

我想访问 div.pbox

【问题讨论】：

能否分享两个html文件的代码？
你必须从另一个 html 文件中获取值，然后在第二个文件中附加它们你必须使用它们的类名或 id 获取元素
codesandbox.io/s/key-board-forked-kc7o3?file=/src/index.js 这是我的 js 文件中第 174 - 180 行的代码框的链接。 test.html 文件包含我想要获取的元素
请注意。在沙箱中，您的 html 上方有一个 id="textIn"，而您的 JS 文件正在寻找 querySelector("#txtIn")
@KJEK-Code 是的，我刚刚看到，当我审查我的代码时，谢谢你

标签： javascript html css

【解决方案1】：

您在这里遇到了一些问题。在主页上没有pbox，在测试页面上没有add button，这很容易通过条件来解决，看看它们是否存在或使用2个JavaScript文件。

您面临的下一个问题是如何存储信息并将其从一页转移到另一页。一旦页面重新加载，信息就会消失。在这种情况下，答案是本地存储。

当页面加载时，它会检查本地存储中是否存在列表。如果存在，它会获取该信息并对其进行解析。如果它不存在，它只是一个空数组。这发生在两个页面上，因为它们都需要这些信息。

当测试页面加载时，它会简单地抓取列表中的信息并将其映射到 pbox 以填写当时列表中的任何内容。

在主页上单击按钮后，它将新项目推送到列表数组，然后更新本地存储。

这里是Sandbox Link

【讨论】：