单击另一个页面上的按钮时如何在页面上创建 div

Question

当我点击 p tag 页面上的 'cart' 按钮时，我需要在 'submit' 页面上的 'index' 中写入新文本。我怎样才能用 JavaScript 做到这一点。我已经试过了

HTML 页面 index :

<button onclick="myFunction()"> click me </button>

HTML 页面 cart :

<p id="id"> </p>

Js code :

function myFunction() {
    document.getElementById('id').innerHtml = 'mytext';
}

但它不起作用。我该如何解决这个问题？谢谢

Answer 1

本参考中的索引页和购物车页是不同的文档。

相应地，当您在索引页上调用您的函数时，它在该文档中找不到具有上述 id 的元素。

function myFunction() {
    document.getElementById('id').innerHtml = 'mytext';
}

仅使用 Javascript 执行此技巧的唯一方法是使用 Cookie。 您可以在客户端的浏览器中创建一个 Cookie 并将“mytext”保存为一个对象，然后在另一个页面上检索它。

查看此页面 https://www.w3schools.com/js/js_cookies.asp

Answer 2

如果您没有将 SPA 结构与 React 或 Vue 等框架一起使用，这可能会很困难 - 但并非不可能。

您可以做些什么来规避这个问题，您可以根据您是否希望它在不同浏览器会话之间保留，然后在其他页面中将变量保存在 sessionStorage 或 localStorage 中检查此变量是否存在以及是否进行了所需的更改。

然后当它应该变回来时，您再次从 localStorage 中删除该变量。

这是一个有点hacky的方法，最好的方法是要么做这个服务器端，要么有一个SPA并通过全局状态共享变量。