I can't get my Javascript Login Form to work

Question

I'm trying to learn Java to apply to HTML. As an exercise I'm trying to create a Signup form that would create a username, and then a Login page that will take input for the username and compare it to the Username enter in the Signup. But Im getting an error, saying that the userName that I had created as a variable in the signup page is not defined.

My guess is that the login form is not having access to that variable, but I can't figure out how to send information from one form to the other.

Any ideas?

 //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 and password are scoped to the function they are declared in - you either need to do

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

or

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