Javascript 如何从文本字段打印输入？_Javascript_Html

Javascript 如何从文本字段打印输入？

javascript html

Javascript 如何从文本字段打印输入？,javascript,html,Javascript,Html,我一直在尝试建立一个简单的登录系统（本地），但我有点困惑。。如何将用户写入文本字段的输入在控制台中打印并存储在变量中我的HTML代码： <!DOCTYPE html> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <html lang="en"> <head> <meta charset

我一直在尝试建立一个简单的登录系统（本地），但我有点困惑。。如何将用户写入文本字段的输入在控制台中打印并存储在变量中

我的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>

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')    
    // }
}

编辑：添加了我的JS代码。

（注意：我已经将我的代码拆分为两个不同的JS文件，因为我只希望结果简单。）

我们可以使用

onsubmit

事件进行表单提交

更新：我向您展示表单提交方法

const form=document.querySelector（“表单”）；
表格.附录列表（“提交”、（e）=>{
e、 预防默认值（）；
if（格式[“text1”].value&&form[“text2”].value）{
console.log（“提交表格”）；
form.reset（）；
}否则{
console.log（“提供所需值”）；
}
})


登录#1
简单登录系统
用户名：
密码：
登录

我们可以使用

onsubmit

事件进行表单提交

更新：我向您展示表单提交方法

const form=document.querySelector（“表单”）；
表格.附录列表（“提交”、（e）=>{
e、 预防默认值（）；
if（格式[“text1”].value&&form[“text2”].value）{
console.log（“提交表格”）；
form.reset（）；
}否则{
console.log（“提供所需值”）；
}
})


登录#1
简单登录系统
用户名：
密码：
登录

为您的输入和按钮设置ID。您可以通过向按钮添加type=“button”来防止提交

只需在按钮上设置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>

为您的输入和按钮设置ID。您可以通过向按钮添加type=“button”来防止提交

只需在按钮上设置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>

我会使用表单的

onsubmit

方法和

preventDefault（）

来避免页面刷新。这比依赖按钮的

onclick

要好，因为您也可以使用enter按钮提交。另外，最好使用单个函数来处理submit，而不是拆分它们。请共享您的javascript代码，以便其他人能够提供帮助。您正在调用函数并导入脚本，但尚未提供所述函数和脚本的代码。我们只看到了拼图的一部分，所以很难调试。请包括所有添加的内容，抱歉造成混淆！我唯一的问题是，我不知道如何将用户在用户名或密码文本字段中编写的输入与用户名/密码变量进行比较。主要的问题是，使用

document.getElementById（id\u name）从输入中获取值.value

其中

id\u name

是输入元素的

id

。然后你可以用它做你想做的事。另外，您的

onclick

事件错误地调用了两个函数，需要用

分隔

不是

，

我会使用表单的

onsubmit

方法和

preventDefault（）

来避免页面刷新。这比依赖按钮的

onclick

document.getElementById（id\u name）从输入中获取值.value

其中

id\u name

是输入元素的

id

。然后你可以用它做你想做的事。另外，您的

onclick

事件错误地调用了两个函数，需要用

分隔不是，哦，所以我可以将ID设置为用户名和密码文本字段，并使用ID访问值？是的，您还可以访问其他元素，如类、属性@托马斯：表单可以直接获取其字段的值。检查下面的代码：我们不需要使用额外的id和类。就像我在表单[“text1”].value中做的一样。这是一个较小的代码。保存了大量代码哦，这样我就可以将ID设置为用户名和密码文本字段，并使用ID访问值？是的，您还可以访问其他元素，如类、属性@托马斯：表单可以直接获取其字段的值。检查下面的代码：我们不需要使用额外的id和类。就像我在表单[“text1”].value中做的一样。这是一个较小的代码。节省了大量代码
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();
}