在不更改 js 文件的情况下将用户带到其他页面答案

【问题标题】：Taking user to other page without changing the js file在不更改 js 文件的情况下将用户带到其他页面
【发布时间】：2021-06-25 13:42:39
【问题描述】：

我正在尝试在链接到 JS 文件的 html 页面中提示用户输入玩家姓名，我需要稍后在游戏中重新使用这些名称，但我认为我不能将它们存储在本地存储，所以我想知道有没有其他方法可以向用户显示另一个页面而不将它们重定向到另一个页面？

欢迎您提出其他解决方案。

【问题讨论】：

你的意思是你需要在页面之间导航而不需要每次加载JS文件，网站打开时只有一次？
@mohammedalshobaki 我宁愿需要用一个 js 文件操作两个 html 页面，我做不到，所以我正在寻找另一种方法。
您可以尝试 AJAX 来更新内容并在页面之间导航时保留页脚和页眉吗？

标签： javascript html css json

【解决方案1】：

您可以使用隐藏的<div> 来输入姓名。

小例子：

HTML：

<div style="display: none" class="overlay" id="form">
    <input type="text" id="name" placeholder="Player Name">
    <input type="button" id="btn" value="Confirm">
</div>

CSS：

.overlay
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%
    height: 100%;
    z-index: 100;
}

JS：

显示提示：

document.getElementById("form").style.display = "block";

隐藏提示：

document.getElementById("form").style.display = "none";

【讨论】：

我正在根据玩家数量动态创建名称输入：
const x = localStorage.getItem('playersNum'); const parentDiv = document.getElementById('player-list'); for (let i = 0; i player${i}); newInput.setAttribute("占位符", "玩家姓名"); parentDiv.appendChild(newInput); }
我宁愿隐藏这个并为游戏显示另一个。
为什么不将游戏和名称提示都放在我的答案中的叠加层中，并在需要时显示/隐藏它们？