How to call a function from another js file and insert text into html page

Question

I have a semi-simple problem: I want my landing page to ask the user to enter their name into a input box. Once they have entered their name, the page should switch to another page that says Hello [username]... and present the content as well.

Here is my first html file (name.html) asking for the first name:

<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>

Here is the accompanying JavaScript file (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.")
    }
}

Now, here is the new html page (menu.html) that appears once the user enters their name:

<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>

Lastly, the accompanying JS file (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();

    });
});

All information on the client will be lost. One way to do it is using the [querystring](https://nl.wikipedia.org/wiki/Querystring) to transport the information. To be safe you have to [encode](http://stackoverflow.com/questions/597028/how-can-encode-a-query-string-so-that-it-is-the-value-of-another-query-string-in) it. On the other page you can [read](https://gomakethings.com/how-to-get-the-value-of-a-querystring-with-native-javascript/) and decode the querystring during [page load](http://stackoverflow.com/questions/3842614/how-do-i-call-a-javascript-function-on-page-load). — Jeroen Heier, Jul 03 '16 at 06:34

score 0 · Answer 1 · answered Jul 03 '16 at 06:30

You have to convey the information from the first page over to the second page somehow. There are at least three ways to do that (one of which is a bad idea):

Using web storage, in this case probably sessionStorage if it's session-specific information. Your first page stores it:
```
sessionStorage.setItem("name", theUserName);
```
and your next page gets it and uses it
```
var name = sessionStorage.getItem("name");
if (name) {
    $("#hello").show().find(".name").text(name);
}
```
There I've assumed an element with the id hello which will by default have display: none, with a descendant element with the class name which we fill in with the name. The code above shows the default-hidden element if there's a name and fills it in.
Pass it in the query string. After getting the name, when switching to the next page, add "?" + encodeURIComponent(theUserName) to the URL. Then use location.search to get the name and use it in much the way you do in #1 above.
Store it in a cookie, which you sould use . I mention this only to say: While it's possible to do it like this, don't. Cookies aren't meant for client-side-only information.

kmugi · Accepted Answer · 2016-07-03T06:59:29.583

I modified your menu.html just a bit. You need to make sure that you save the input name in a storage (cookies, local storage or session storage). Here's how it works:

menu.html

<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>

name.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.")
}
}

menu.js

$(document).ready(function() {
window.onload = $('#username').html(localStorage.getItem("storageName"));

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();

});
});

Hope this helps!

This was right on the money! A simple localStorage was exactly what I was hoping for. Thanks Kevin and also @T.J. Crowder for the other options I can use, particularly on the client side. — Delante Lee Bess, Jul 03 '16 at 22:23

How to call a function from another js file and insert text into html page

2 Answers2