Trying to make login and register form-CodePudding

I'm trying to make a form that can create new users and passwords that store the Values from the input tag when the user clicks on the register button.

But when I click register it's not adding the username and password value into the empty array.

JavaScript Code

// user need to create new username 
// writeing value in username and password inputs and than click registar
// after registar been clicked add inputs values into an array


var newUser = document.querySelector('.input_username').value;
var newPass = document.querySelector('.input_password').value;
let btnLogin = document.querySelector('.btn_login')
let btnRegistar = document.querySelector('.btn_registar')


let usernames = [];
let passwords = [];

function addUser(){

   let userCreate = usernames.push(newUser);
   let passCreate = passwords.push(newPass); 
   console.log(userCreate);
   console.log(passCreate);
   

}

btnRegistar.addEventListener('click', addUser);

HTML CODE

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div >
        <h1>Login</h1>
        <label for="">Username</label>
        <input type="text" name="" id=""  value=""> <br/>
        <label for="">Password</label> 
        <input type="text"  value=""><br/>
        <button >Login</button><br/><br/>  
        <button >Registar</button>
        <h2>Login Status: <span > </span></h2>

    </div>
    


    <script src="script.js"></script>
</body>
</html>

This is what I'm getting in the console log

CodePudding user response：

As someone mention in the comment section, push is returning the length of the array, not the values.

Instead, use concat() method.

And if you take .value from your HTML element, declare them inside your function, otherwise, if they are declared in the global scope, they will usually be empty.

// user need to create new username 
// writeing value in username and password inputs and than click registar
// after registar been clicked add inputs values into an array

let btnLogin = document.querySelector('.btn_login')
let btnRegistar = document.querySelector('.btn_registar')
let passwords = [];
let usernames = [];

function addUser(){

var newUser = document.querySelector('.input_username').value;
var newPass = document.querySelector('.input_password').value;

   usernames = usernames.concat(newUser);
   passwords = passwords.concat(newPass);
   console.log(usernames);
   console.log(passwords);
}

btnRegistar.addEventListener('click', addUser);

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div >
        <h1>Login</h1>
        <label for="">Username</label>
        <input type="text" name="" id=""  value=""> <br/>
        <label for="">Password</label> 
        <input type="text" id=""  value=""><br/>
        <button >Login</button><br/><br/>  
        <button >Registar</button>
        <h2>Login Status: <span > </span></h2>

    </div>
    


    <script src="script.js"></script>
</body>
</html>

CodePudding user response：

You are printing userCreate and passCreate variables but you want to print the arrays

instead of

console.log(userCreate);
console.log(passCreate);

do this

console.log(usernames);
console.log(passwords);

CodePudding user response：

The variables you are outputting hold the value true or false either your action has been processed or not. If you want to return the actual value that has been submitted try

Console.log(usernames);
Console.log(passwords)

This will return an array for all the data pushed. You can also perform

Console.log(usernames[0])

To return only the first submitted value.

CodePudding user response：

Here is the updated code

// user need to create new username 
// writeing value in username and password inputs and than click registar
// after registar been clicked add inputs values into an array

let btnLogin = document.querySelector('.btn_login')
let btnRegistar = document.querySelector('.btn_registar')

let usernames = [];
let passwords = [];

function addUser() {

    var newUser = document.querySelector('.input_username').value;
    var newPass = document.querySelector('.input_password').value;

    let userCreate = usernames.concat(newUser);
    let passCreate = passwords.concat(newPass);
    console.log(usernames);
    console.log(passwords);


}

btnRegistar.addEventListener('click', addUser);

Here what i'm getting in console

CodePudding user response：

Edit: The return type of .push is the new length of the array, which is what you are storing in your userCreate and passCreate variable. Log the usernames and password array instead. Or if you want to log the current values console.log(usernames[userCreate-1])

Remove the .value here, like this:

var newUser = document.querySelector('.input_username');
var newPass = document.querySelector('.input_password');

And instead add it here

let userCreate = usernames.push(newUser.value);
let passCreate = passwords.push(newPass.value);