Getelementbyid error

Hello,

I am trying to get an user name from the user, and when the user click submit button his user name is shown on another page. my code does not work. can someone help me fix it? thanks

this is my code:
html- index.html

    <script src="app.js"></script>

    <h3>Enter your user name</h3>

    <form action="game.html", method="post">
        <input type="text" minlength="2" required="required" id="userName-input" size="40" placeholder="Enter User Name">
        <br>
        <button id="submit-button" onclick="getUserName()">Start Playing</button>
    </form>


html- game.html

    <script src="app.js"></script>
<body>
    <header id="hello"></div>
</body>


js:

function getUserName(){
    const userNameInput = document.getElementById("userName-input");
    const helloText = document.getElementById("hello");
    helloText.innerText = userNameInput.value;
}