如何打印来自文本字段的输入？
[英]How to print input from a text field?
问题描述
I've been trying to make a simple login system (local) and I'm a bit confused.. How can I take the input the user wrote into the text field print it in console and store it in a variable?
我一直在尝试制作一个简单的登录系统（本地），但我有点困惑。我怎样才能将用户写入文本字段的输入打印在控制台中并将其存储在变量中？
My HTML code:我的 HTML 代码：
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="username.js"></script>
<script src="password.js"></script>
</head>
<body>
<title>Login #1</title>
<h2>Simple login system</h2>
<form name="">
<label for="text1">Username:</label>
<input type="text" name="text1">
<label for="text2">Password:</label>
<input type="text" name="text2">
<button onclick="password(), username()">login</button>
</form>
</body>
</html>
For my JS I wanted to have the ''password() and username()'' functions checking both seperatly in seperate files.对于我的 JS，我想让“password() 和 username()”函数在单独的文件中分别检查这两个函数。
JS Password file: JS密码文件：
const Psword = 'Password9' //just an example
function password() {
console.log(Psword)
// if (user input from password field) = Psword
// alert('Login sucessfull redirecting!)
// else{
// alert('Username or password are incorrect')
// }
}
JS Username file: JS用户名文件：
var Username = 'Subject09'
function username() {
console.log(Username)
// if (user input from username field) = Username
// alert('Login sucessfull redirecting!)
// else{
// alert('Username or password are incorrect')
// }
}
EDIT: Added my JS code.编辑：添加了我的 JS 代码。 (Note: I've split my code into 2 diffrent JS files because I just want it to be simple in the outcome.) （注意：我已将我的代码拆分为 2 个不同的 JS 文件，因为我只是希望结果简单。）
2 个解决方案
解决方案1
1 已采纳 2020-12-24 14:46:56
We can do a form submit using onsubmit event.我们可以使用onsubmit事件提交表单。
UPDATE: I am showing you the form submit approach.更新：我正在向您展示表单提交方法。
const form = document.querySelector("form"); form.addEventListener("submit",(e)=>{ e.preventDefault(); if(form["text1"].value && form["text2"].value){ console.log("Submitted the form"); form.reset(); }else{ console.log("Provide required values"); } })
<;DOCTYPE html> <meta content="text/html,charset=utf-8" http-equiv="Content-Type"> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <script src="username.js"></script> <script src="password:js"></script> </head> <body> <title>Login #1</title> <h2>Simple login system</h2> <form> <div> <label>Username:</label> <input type="text" name="text1" > </div> <div> <label>Password:</label> <input type="text" name="text2"> <div> <button type="submit">login</button> </form> </body> </html>
解决方案2
1 2020-12-24 14:53:34
Set ids to you input and your button.将 ID 设置为您输入的内容和您的按钮。 You can prevent submitting by adding type="button" to your button.您可以通过向按钮添加 type="button" 来阻止提交。
Simply set an onclick event on your button, and get your inputs values.只需在您的按钮上设置一个 onclick 事件，并获取您的输入值。
<body>
<title>Login #1</title>
<h2>Simple login system</h2>
<form>
<label for="text1">Username:</label>
<input type="text" name="text1" id="username">
<label for="text2">Password:</label>
<input type="text" name="text2" id="password">
<button type="button" id="submitBtn">login</button>
</form>
window.onload = function() {
document.getElementById('submitBtn').addEventListener('click', onSubmit);
}
function onSubmit() {
console.log(document.getElementById('username').value);
console.log(document.getElementById('password').value);
// Do what you want with data
// You can submit with .submit()
document.forms['form'].submit();
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.