Save state of click event in hidde/show password function

Question

How to save state of click event and when password is displayed the eye button should hide the password?

<div class="input-group">
    <input type="password" value="test value" name="password" id="id_password" class="form-control" placeholder="Password">
    <span id="show_password" title="Click here to show/hide password" class="input-group-addon" style="cursor: pointer;"><i id="button-eye" class="fa fa-eye"></i></span>
</div>

JS:

  var eye_button = document.querySelector('#button-eye');

  eye_button.addEventListener('click', function (event) {
    eye_button_checked = true;
    var password = document.querySelector('#id_password');
    console.log("click");

    if (eye_button_checked) {
      // Show the password
      password.type = 'text';
    } else {
      // Hide the password
      password.type = 'password';
      eye_button_checked = false
    }
    // need to change icon to fa-eye-slash and change password.type to password again

  }, false);

Example: https://jsfiddle.net/5apz0khL/1/

As per your code, every click will reset `eye_button_checked` to `true`. You need to move the declaration and initialization outside your click handler function. — , Dec 30 '19 at 11:44
Here's a fixed version: https://jsfiddle.net/khrismuc/e8yup0dx/ — , Dec 30 '19 at 11:57
This is basically a duplicate of https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript, the rest is just implementation details — , Dec 30 '19 at 12:13

Nikita Aplin · Answer 1 · 2019-12-30T11:59:00.280

0

Change your if
Why u need to save state? Use state of input.

if (eye_button_checked) {

to

if (password.type == "text") {

edited Dec 30 '19 at 11:59

answered Dec 30 '19 at 11:45

Nikita Aplin

367
2
10

Or put your eye_button_checked = true; out of function – Nikita Aplin Dec 30 '19 at 11:46

FZs · Accepted Answer · 2020-02-16T10:48:11.863

Function-scoped variables are created and destroyed on each call to them, and cannot maintain their state.

You have multiple ways to solve the problem:

Using global variables (not recommended because of global scope pollution)

var eye_button = document.querySelector('#button-eye');
var eye_button_checked = false
eye_button.addEventListener('click', function (event) {
    var password = document.querySelector('#id_password');
    console.log("click");

    //Invert the variable
    eye_button_checked=!eye_button_checked

    password.type = eye_button_checked ? 'text' : 'password';
    // need to change icon to fa-eye-slash and change password.type to password again

}, false);

Or, use a block-scoped variable, and a block that encapsulates it (prevents from being accessed outside):

var eye_button = document.querySelector('#button-eye');
{
    let eye_button_checked = false
    eye_button.addEventListener('click', function (event) {
        var password = document.querySelector('#id_password');
        console.log("click");

        //Invert the variable
        eye_button_checked=!eye_button_checked

        password.type = eye_button_checked ? 'text' : 'password';
        // need to change icon to fa-eye-slash and change password.type to password again

    }, false);
}
//eye_button_checked can't be accessed here

Alternatively, you can check the type of the password element, and invert it:

var eye_button = document.querySelector('#button-eye');
eye_button.addEventListener('click', function (event) {
    var password = document.querySelector('#id_password');
    console.log("click");


    password.type = password.type === 'password' ? 'text' : 'password';
    // need to change icon to fa-eye-slash and change password.type to password again

}, false);

Save state of click event in hidde/show password function

2 Answers2