Password-checker JavaScript and HTML

Question

I am trying to have a website display different messages depending on whether the password entered is correct or not (correct password is thePassword). So far, no luck.

According to Chrome, the error is in this line (first line of the function):

if (document.getElementById("psw") = "thePassword") {

JSFiddle: https://jsfiddle.net/5grtmxd4/

Thanks in advance!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form>
    Password<br>
    <input id="psw" type="password" name="password" size="45" autofocus></input><br><br>
    <input type="submit" value="Submit" onclick="message();"></input>
  </form>
<script>
function message () {
  if (document.getElementById("psw") = "thePassword") {
    document.getElementById("display").innerHTML = "Logged in";
  } else {
    document.getElementById("display").innerHTML = "Try again!";
  }}
</script>
<p id="display"></p>
</body>
</html>

EDIT: I would appreciate that instead of trying to rewrite the entire code, only neccessary changes are made. Thanks!

You are trying to assign a string to a Node. Try to compare its value to a string: `if (document.getElementById("psw").value == "thePassword")` However, if somebody uses "Inspect DOM", it's easy to spot the password anyway, so this is no secure method whatsoever. — insertusernamehere, Jun 07 '17 at 15:47
You _do_ understand that checking a password in JavaScript gives away the password to anyone who looks at your source, right? — rickvdbosch, Jun 07 '17 at 15:48
@insertusernamehere That works, thanks a lot. Yes, I am aware, this is simply for testing since I am still new to JavaScript. Do you have any suggestions for securing it? php, method=POST or similar? — thesystem, Jun 07 '17 at 15:50
@thesystem "Do you have any suggestions..." [the gulf of information necessary for you to properly secure passwords is vast](https://stackoverflow.com/a/2794089/497418). It's not insurmountable, but please don't attempt to implement *anything* password related until you have thoroughly researched the topic. — zzzzBov, Jun 07 '17 at 15:54
@zzzzBov that's a great resource. Right now I am just messing around with it in order to learn, so will make sure not to do that. Thank you very much — thesystem, Jun 07 '17 at 16:01

Mateus Veloso · Answer 1 · 2017-06-07T15:49:36.977

2

Change

if(document.getElementById("psw") = "thePassword")

if(document.getElementById("psw").value == "thePassword")

edited Jun 07 '17 at 15:49

answered Jun 07 '17 at 15:47

Mateus Veloso

144
9

1

`document.getElementById("psw").value`? – Igor Jun 07 '17 at 15:49

score 1 · Answer 2 · edited Jun 07 '17 at 15:53

1

Use double equals(==) in if statement instead of single equal(=)

if (document.getElementById("psw").value == "thePassword")

Instead of

if (document.getElementById("psw") = "thePassword")

edited Jun 07 '17 at 15:53

insertusernamehere

23,204
9
87
126

answered Jun 07 '17 at 15:49

RamiReddy P

1,628
1
18
29

score 1 · Accepted Answer · answered Jun 07 '17 at 15:53

There are several things wrong with your code:

Compare .value, not the element itself
Comparing is (at least) == instead of = (assignment)
Do not use a submit button as a trigger, since this will reset the page right after clicking the button

Please find an updated version at https://jsfiddle.net/5grtmxd4/1/

function message() {
    if (document.getElementById("psw").value == "thePassword") {
        document.getElementById("display").innerHTML = "Logged in";
    } else {
        document.getElementById("display").innerHTML = "Try again!";
    }
}

Password-checker JavaScript and HTML

3 Answers3