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 class="">
<label class="t2" for="password_current">Current Password</label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
<input type="checkbox" id="togglePw" onclick="showPassword()"/>
<label for="togglePw" class="fa"></label>
</p>
<p class="">
<label class="t2" for="password_1">New Password</label>
<input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
<input type="checkbox" id="togglePw" onclick="showPassword()"/>
<label for="togglePw" class="fa"></label>
</p>
<p class="">
<label class="t2" for="password_2">Repeat New Password</label>
<input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
<input type="checkbox" id="togglePw" onclick="showPassword()"/>
<label for="togglePw" class="fa"></label>
</p>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";
}
}
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 class="">
<label class="t2" for="password_current">Current Password</label>
<input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
<input type="checkbox" id="togglePw_current" onclick="showPassword('password_current')"/>
<label for="togglePw_current" class="fa"></label>
</p>
<p class="">
<label class="t2" for="password_1">New Password</label>
<input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
<input type="checkbox" id="togglePw_1" onclick="showPassword('password_1')"/>
<label for="togglePw_1" class="fa"></label>
</p>
<p class="">
<label class="t2" for="password_2">Repeat New Password</label>
<input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
<input type="checkbox" id="togglePw_2" onclick="showPassword('password_2')"/>
<label for="togglePw_2" class="fa"></label>
</p>