简体   繁体   English

JavaScript登录表单document.getElementById未检测到值

[英]JavaScript Login form document.getElementById is not detecting value

Can anybody tell me why document.getElementById is not detecting the entered password in the code below: 谁能告诉我为什么document.getElementById没有在下面的代码中检测到输入的密码:

 function myFunction() { let email = "name@email.com"; let password = "password"; if (document.getElementById("password") == password) { Console.console.log("success"); } else { console.log("Failure"); console.log(password); console.log(document.getElementById("password")); } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <form action="#"> <label for="Email">Email</label> <input id="email" type="email"> <label for="password">Password</label> <input id="password" type="text"> <button onclick="myFunction()">Submit</button> </form> </body> </html> 

When I try to log it's value in the console I just get input id="password" type="text"and I am not sure what this means other than for some reason it is not having the value I want assigned to it. 当我尝试在控制台中记录它的值时,我只是得到输入id =“ password” type =“ text”,除了由于某种原因它没有我想要分配的值之外,我不确定这意味着什么。

-Thanks -谢谢

The function document.getElementById returns a DOM Element Object. 函数document.getElementById返回DOM元素对象。 This object has various attributes like .style , but to get the text entered for an <input> element, you want the .value attribute. 该对象具有各种属性,例如.style ,但是要获取为<input>元素<input>的文本,您需要.value属性。

 function myFunction() { let email = "name@email.com"; let password = "password"; if (document.getElementById("password").value == password){ console.log("success"); } else { console.log("Failure"); console.log(password); console.log(document.getElementById("password").value); } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login</title> </head> <body> <form action="#"> <label for="Email">Email</label> <input id="email" type="email"> <label for="password">Password</label> <input id="password" type="text"> <button onclick="myFunction()">Submit</button> </form> </body> </html> 

Change these lines 更改这些行

   if(document.getElementById("password") == password){
   console.log(document.getElementById("password"));

to these lines 这些行

   if(document.getElementById("password").value == password){
   console.log(document.getElementById("password").value);

and Bob's your uncle. 而鲍勃是你的叔叔。

your implementation is ok, but you did a slight mistake. 您的实现还可以,但是您犯了一个小错误。 document returns an object with multiple keys. 文档返回带有多个键的对象。 Among those keys 'value' key contains the value of your input field. 在这些键中,“值”键包含输入字段的值。

document.getElementById("password").value

will return your desired value. 将返回您想要的值。

Note: You can access all the attributes from this object. 注意:您可以从该对象访问所有属性。 For example 例如

document.getElementById("password").placeholder 

will return the hint from the input field 将从输入字段返回提示

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM