i'm trying to make a form that can create new users and password 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 im getting in 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);