Я не могу заставить мою Javascript форму входа работать

Question

Я пытаюсь научиться Java применять к HTML. В качестве упражнения я пытаюсь создать форму регистрации, которая создаст имя пользователя, а затем страницу входа в систему, которая будет принимать входные данные для имени пользователя и сравнивать его с именем пользователя, указанным при регистрации. Но я получаю сообщение об ошибке, в котором говорится, что имя пользователя, созданное мной в качестве переменной на странице регистрации, не определено.

Я предполагаю, что форма входа не имеет доступа к этой переменной, но я могу ' Не могу понять, как отправить информацию из одной формы в другую.

Есть идеи?

//SIGNUP SCRIPT
    document.getElementById("signup-button").onclick = function() {
        var userName = document.getElementById("signup-username").value;
        var passWord = document.getElementById("signup-password").value;
        console.log(userName) //THI IS JUST TO CHECK CONSOLE AND MAKE SURE THAT THE USERNAME IS BEING REGISTERED 
        console.log(passWord)
    }
    
    //LOGIN SCRIPT
    document.getElementById("login-button").onclick = function() {
        if ( document.getElementById("signup-username").value == userName) {
            alert("loged in")
        }
        else alert("You enter the wrong username!")
        }

  body {
        background-color: black;
        margin: 0px;
        padding: 0px;
        font-family: "Helvetica";     
    }
    
    #form {
        width: 400px; 
        height: 300px;
        border: 1px white solid;
        color: white;
        margin: 50px auto;
    }
    
    #form-content {
        margin-left: 20px;
    }
    
    #username {
        width: 200px;
        text-align: right;
    }
    
    #password {
        width: 200px;
        text-align: right;
    }
    
    .button {
        margin: 30px 0 0 10px;
        padding: 5px 20px;
        width: 50px;
        background-color: white;
        color: black;
    }
    
    .button:hover {
        background-color: black;
        color: white;
        border: 2px white solid; 
        cursor: pointer;
    } 
    

<!--SIGN UP FORM-->
    <div id="form">
        <div id="form-content">
            <h1>Sign Up</h1>
            <p id="username">Username: <input type="text" id="signup-username" value="Enter your username or email."></p>
            <p id="password">Password: <input type="text" id="signup-password" value="Enter your password."></p>
            <p id="signup-button" class="button">Submit</p>
        </div>
    </div>
    
    
    <!--LOG IN FORM-->
    <div id="form">
        <div id="form-content">
            <h1>Log in</h1>
            <p id="username">Username: <input type="text" id="login-username" value="Enter your username or email."></p>
            <p id="password">Password: <input type="text" id="login-password" value="Enter your password."></p>
            <p id="login-button" class="button">Submit</p>
        </div>
    </div>

Answer 1

username и password относятся к функции, в которой они объявлены - вам нужно либо

document.getElementById("signup-button").onclick = function() {
    window.userName = document.getElementById("signup-username").value;
    window.passWord = document.getElementById("signup-password").value;
    console.log(userName) //THI IS JUST TO CHECK CONSOLE AND MAKE SURE THAT THE USERNAME IS BEING REGISTERED 
    console.log(passWord)
}

, либо

var userName;
var passWord;
document.getElementById("signup-button").onclick = function() {
    userName = document.getElementById("signup-username").value;
    passWord = document.getElementById("signup-password").value;
    console.log(userName) //THI IS JUST TO CHECK CONSOLE AND MAKE SURE THAT THE USERNAME IS BEING REGISTERED 
    console.log(passWord)
}