Question

我有一个半简单的问题：我希望我的目标网页要求用户在输入框中输入他们的名字。一旦他们输入了他们的名字，该页面应切换到另一个页面，上面写着Hello [用户名] ...并显示内容。

这是我的第一个要求名字的html文件（name.html）：

<body>
    <form id="myForm" name="myForm">
        <table class="input">
            <tr>
                <label>
                    <h1>Enter your firstname:</h1>
                </label>
                <td>
                    <input type="text" id="firstName" class="form-control" autofocus>
                </td>
                <td>
                    <input type="button" value="Submit" onclick="menuPage();" class="btn btn-primary btn-lg">
                </td>
            </tr>
            <tr>
                <td id="username">
                </td>
            </tr>
        </table>
    </form>
    <script src="name.js"></script>
    <script src="ie10-viewport-bug-workaround.js"></script>
</body>

以下是随附的JavaScript文件（name.js）：

    function menuPage() {

    var firstName = document.getElementById("firstName").value;

    if (firstName.trim() && firstName != "") {
        document.getElementById("username").innerHTML = firstName;
        window.location.replace("menu.html")
    } else {
        alert("Please put in your first name.")
    }
}

现在，这是用户输入名称后出现的新html页面（menu.html）：

<div class="jumbotron">
    <div class="container">
        <div>
            <h1 class="display-3">Hello!</h1>
            <h1 id="username"></h1>
            <p>This is your weekly meal to cook! Enjoy!!</p>
            </p>
            <h2 class="quote"><span class="words"></span></h2>
            <button class="btn btn-success btn-sm" value="Press Me to get your Weekly Menu">Change Meal</button>
        </div>
    </div>
</div>
<script src="name.js"></script>
<script src="menu.js"></script>

最后，附带的JS文件（menu.js）：

$(document).ready(function() {

    weeklyMenu();

    function weeklyMenu() {

        var menu = ["meatloaf", "albondigas", "enchiladas", "lasgna", "chicken, mash potatoes, mac & cheese", "turkey burgers, sweet potatoes fries", "stuffed peppers", "french soup"];

        var randomMenu = menu[Math.floor(Math.random() * menu.length)];
        var splitMenu = randomMenu.split();
        $('.words').text(splitMenu[0]);
    }

    $("button").on("click", function() {

        weeklyMenu();

    });
});

Answer 1

您必须以某种方式将信息从第一页传达到第二页。至少有三种方法（其中一种是坏主意）：

使用网络存储，在这种情况下可能是sessionStorage，如果它是特定于会话的信息。您的第一页存储它：
```
sessionStorage.setItem("name", theUserName);
```
并且您的下一页获取并使用它
```
var name = sessionStorage.getItem("name");
if (name) {
    $("#hello").show().find(".name").text(name);
}
```
在那里，我假设一个元素包含id hello，默认情况下会display: none，并且我们会填充类name的后代元素在与名称。如果有名称并填写，则上面的代码会显示默认隐藏元素。
将其传递给查询字符串。获取名称后，切换到下一页时，将"?" + encodeURIComponent(theUserName)添加到URL。然后使用location.search获取名称，并按照上面＃1中的方式使用它。
将其存储在您可以使用的Cookie中。我之所以提到这一点，只是说：虽然可能这样做，但不要这样做。 Cookie不仅仅适用于客户端信息。

Answer 2

我稍微修改了你的menu.html。您需要确保将输入名称保存在存储（cookie，本地存储或会话存储）中。以下是它的工作原理：

<强> menu.html

$content = preg_match_all('/[a-zA-Z]/', $content );

<强> name.js

<div class="container">
    <div>
        <h1 class="display-3">Hello, <span id="username"></span>!</h1>
        <p>This is your weekly meal to cook! Enjoy!!</p>
    </p>
    <h2 class="quote"><span class="words"></span></h2>
    <button class="btn btn-success btn-sm" value="Press Me to get your Weekly Menu">Change Meal</button>
</div>

<强> menu.js

function menuPage() {

var firstName = document.getElementById("firstName").value;
if (firstName.trim() && firstName != "") {
    localStorage.setItem("storageName",firstName);
    document.getElementById("username").innerHTML = firstName;
    window.location.replace("menu.html")
} else {
    alert("Please put in your first name.")
}
}

希望这有帮助！

如何从另一个js文件调用函数并将文本插入到html页面

2 个答案: