How do I store the content of a variable for later use in other function (Javascript)

I have been trying to make a simple Register/Login system in JS. I tried to get the username/password values through user inputs and turn them into variables using a register() function. After that, however, these variables no longer hold any value, and I need them to compare with the new login username/password to check if they match in order to login.

Here’s what I tried.

The function below attributes the user’s input to the respective variables successfully. The ID’s are from a text input in a HTML file.

function register () {
    var user1 = window.document.getElementById('username')
    var pass1 = window.document.getElementById('password')
    alert('User registered, user your credentials to login')
}

When I click the ‘register’ button in the html page, the function is called (onclick=”register()”), and I am redirected to the login page.

Here’s the code for the login session:

function login () {
    let userL = window.document.getElementById('usernameL')
    let passL = window.document.getElementById('passwordL')

    if (userL === user1 && passL === pass1) {
        alert(`${userL} successfully logged`)
    }

    else {
        alert('Invalid credentials')
    }

It doesn’t work because in the code above, user1 and pass1 are “not defined”, according to the console. How do I keep the values of these variables stored after getting them in the first function(register) in order to use it when the second function(login) is used?

Answer

Please refer the below code,

<script>
      const allUsers = [];

      function register() {
        // assuming user1 && pass1 are input elements with ids username, password
        var user1 = document.getElementById("username").value;
        var pass1 = document.getElementById("password").value;
        // TODO: always validate the data that is taken as input from the user

        // create an object containing user details
        const newUser = {
          username: user1,
          password: pass1,
        };

        // push the registered user in allUsers array
        allUsers.push(newUser);
        alert("User registered, user your credentials to login");
      }

      function login() {
        // assuming user1 && pass1 are input elements with ids usernameL, passwordL
        let userL = document.getElementById("usernameL").value;
        let passL = document.getElementById("passwordL").value;

        // TODO: always validate the data that is taken as input from the user

        // loop through allUsers array to check whether we already have a user registered with the details given in login form
        for(let user of allUsers) {
          if(user.username === userL && user.password === passL) {
            alert(`${userL} successfully logged`);
            return; // exit the function here
          }
        }

        // if user detail not found in allUsers array this alert will be executed
        alert("Invalid credentials");
      }
    </script>

Store all users in array after successful registration
While login, loop through the registered users array to check whether the user has already registered or not and decide how to handle the logic.
As PM 77-1 mentioned in the comment, please be aware that getElementById(ID) returns us the element itself (the tag itself), if we want to access it text content we can use either getElementById(ID).textContent or getElementById(ID).innerText

Advertisement

Answer