title: I can't get my Javascript Login Form to work
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>Any ideas? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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!")
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  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;
      } 
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--SIGN UP FORM--&gt;
      &lt;div id="form"&gt;
          &lt;div id="form-content"&gt;
              &lt;h1&gt;Sign Up&lt;/h1&gt;
              &lt;p id="username"&gt;Username: &lt;input type="text" id="signup-username" value="Enter your username or email."&gt;&lt;/p&gt;
              &lt;p id="password"&gt;Password: &lt;input type="text" id="signup-password" value="Enter your password."&gt;&lt;/p&gt;
              &lt;p id="signup-button" class="button"&gt;Submit&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
      
      &lt;!--LOG IN FORM--&gt;
      &lt;div id="form"&gt;
          &lt;div id="form-content"&gt;
              &lt;h1&gt;Log in&lt;/h1&gt;
              &lt;p id="username"&gt;Username: &lt;input type="text" id="login-username" value="Enter your username or email."&gt;&lt;/p&gt;
              &lt;p id="password"&gt;Password: &lt;input type="text" id="login-password" value="Enter your password."&gt;&lt;/p&gt;
              &lt;p id="login-button" class="button"&gt;Submit&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>