I have a small function which show and hide passwords in the input fields. It works fine when applied to a single input field, but when I apply to multiple fields it behaves wrong.

For example: by clicking on the input field new password, the function is activated for all the other fields, instead it should be activated only for the desired field.

How can I correct this unwanted behavior? Sorry but I'm relatively new, I appreciate any response, thanks.

function showPassword() {
  var x = document.getElementById("password_current");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

  var y = document.getElementById("password_1");
  if (y.type === "password") {
    y.type = "text";
  } else {
    y.type = "password";
  }


  var z = document.getElementById("password_2");
  if (z.type === "password") {
    z.type = "text";
  } else {
    z.type = "password";
  }
}

label.t2 {
    font-size: 14px!important;
  line-height: 1.5em!important;
  font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw   label:before { content: "\f06e"; }
#togglePw:checked   label:before { content: "\f070"; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p >
    <label  for="password_current">Current Password</label>
    <input type="password"  name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" ></label>
</p>

<p >
    <label  for="password_1">New Password</label>
    <input type="password"  name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" ></label>
</p>

<p >
    <label  for="password_2">Repeat New Password</label>
    <input type="password"  name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw" onclick="showPassword()"/>
    <label for="togglePw" ></label>
</p>

CodePudding user response：

Pass the target field to showPassword():

function showPassword(targetID) {
  var x = document.getElementById(targetID);

  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }

}

label.t2 {
    font-size: 14px!important;
  line-height: 1.5em!important;
  font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

/*Toggle Password class*/
#togglePw { display: none; }
#togglePw   label:before { content: "\f06e"; }
#togglePw:checked   label:before { content: "\f070"; }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">

<p >
    <label  for="password_current">Current Password</label>
    <input type="password"  name="password" id="password_current" autocomplete="off"/>
    <input type="checkbox" id="togglePw_current" onclick="showPassword('password_current')"/>
    <label for="togglePw_current" ></label>
</p>

<p >
    <label  for="password_1">New Password</label>
    <input type="password"  name="password_1" id="password_1" autocomplete="off" />
    <input type="checkbox" id="togglePw_1" onclick="showPassword('password_1')"/>
    <label for="togglePw_1" ></label>
</p>

<p >
    <label  for="password_2">Repeat New Password</label>
    <input type="password"  name="password_2" id="password_2" autocomplete="off" />
    <input type="checkbox" id="togglePw_2" onclick="showPassword('password_2')"/>
    <label for="togglePw_2" ></label>
</p>

CodePudding user response：

Split the function in three function showPassword1(), showPassword2() and showPassword3(). For each input field assign the onclick attribute to the specific function.

But, a more generic and favorable approach is to use this as parameter which will be the reference to the clicked element.

<input type="checkbox" id="togglePw" onclick="showPassword(this)"/>

then use it in the function

function showPassword(passwordField) {
  if (passwordField.type === "password") {
    passwordField.type = "text";
  } else {
    passwordField.type = "password";
  }
}