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:

function myFunction() {

  let email = "[email protected]";
  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.

-Thanks

Solution

The function document.getElementById returns a DOM Element Object. This object has various attributes like .style, but to get the text entered for an <input> element, you want the .value attribute.

function myFunction() {
    let email = "[email protected]";
    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>