Javascript toggle between show and hide a password

Question

I have been working on a project that requires me to toggle between showing and hiding the password in a password field.

The JS code I came up with is:

<script>
  function text(item) {
    if (document.getElementById('password').type = "password") {
      document.getElementById('password').type = "text";
    } else {
      document.getElementById('password').type = "password";
    }

  }
</script>
<input type="checkbox" id="logon-show-password" name="showpassword" class="tickable" onclick="text(this)">

<input type="password" id="password" />

For some reason, it works just fine when toggling between password -> text, but fails to do the opposite.

What am I doing wrong?

Your question may be duplicated https://stackoverflow.com/questions/9419780/javascript-show-hide-password — Jacob Phan, Aug 25 '17 at 07:45

score 1 · Accepted Answer · answered Aug 25 '17 at 07:38

You are missing an = in the if condition

if(document.getElementById('password').type="password"){
                                          ^^^^

Should be

if(document.getElementById('password').type=="password"){

Otherwise it will assign the type password to the field and it will return true always

function text(item) {
  if (document.getElementById('password').type == "password") {
    document.getElementById('password').type = "text";
  } else {
    document.getElementById('password').type = "password";
  }

}

<input type="checkbox" id="logon-show-password" name="showpassword" class="tickable" onclick="text(this)">
<input id="password" type="password" />

Javascript toggle between show and hide a password

1 Answers1