尝试制作登录和注册表单
[英]Trying to make login and register form
问题描述
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 JavaScript 代码
// 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 HTML 代码
<!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 class="div_main">
<h1>Login</h1>
<label for="">Username</label>
<input type="text" name="" id="" class="input_username" value=""> <br/>
<label for="">Password</label>
<input type="text" class="input_password" value=""><br/>
<button class="btn_login">Login</button><br/><br/>
<button class="btn_registar">Registar</button>
<h2>Login Status: <span class="span_result"> </span></h2>
</div>
<script src="script.js"></script>
</body>
</html>
4 个解决方案
解决方案1
1 2022-07-19 09:34:00
As someone mention in the comment section, push is returning the length of the array, not the values.正如评论部分中有人提到的， push是返回数组的长度，而不是值。
Instead, use concat() method.相反，使用concat()方法。
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.如果您从 HTML 元素中获取.value ，请在您的函数中声明它们，否则，如果它们在全局范围内声明，它们通常为空。
// 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 class="div_main"> <h1>Login</h1> <label for="">Username</label> <input type="text" name="" id="" class="input_username" value=""> <br/> <label for="">Password</label> <input type="text" id="" class="input_password" value=""><br/> <button class="btn_login">Login</button><br/><br/> <button class="btn_registar">Registar</button> <h2>Login Status: <span class="span_result"> </span></h2> </div> <script src="script.js"></script> </body> </html>解决方案2
0 2022-07-19 09:24:57
You are printing userCreate and passCreate variables but you want to print the arrays您正在打印 userCreate 和 passCreate 变量，但您想打印数组
instead of代替
console.log(userCreate);
console.log(passCreate);
do this做这个
console.log(usernames);
console.log(passwords);
解决方案3
0 2022-07-19 09:29:56
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.编辑： .push 的返回类型是数组的新长度，这是您存储在 userCreate 和 passCreate 变量中的内容。 Log the usernames and password array instead.而是记录用户名和密码数组。 Or if you want to log the current values console.log(usernames[userCreate-1])或者，如果您想记录当前值console.log(usernames[userCreate-1])
Remove the .value here, like this:删除此处的 .value ，如下所示：
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);
解决方案4
0 2022-07-19 09:58:43
The variables you are outputting hold the value true or false either your action has been processed or not.无论您的操作是否已处理，您输出的变量的值都是 true 或 false。 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.只返回第一个提交的值。
解决方案5
0 2022-07-19 10:19:25
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.