I have “old password, “new password”. “confirm new password”, they have own ID. The below code can work.
<script>
var state = false;
function toggle() {
if (state) {
document.getElementById("password").setAttribute("type", "password");
document.getElementById("eye").classList.toggle("fa-eye");
state = false;
}
else {
document.getElementById("password").setAttribute("type", "text");
document.getElementById("eye").classList.toggle("fa-eye-slash");
state = true;
}
}
</script>
<script>
var state = false;
function toggle() {
if (state) {
document.getElementById("password2").setAttribute("type", "password");
document.getElementById("eye2").classList.toggle("fa-eye");
state = false;
}
else {
document.getElementById("password2").setAttribute("type", "text");
document.getElementById("eye2").classList.toggle("fa-eye-slash");
state = true;
}
}
</script>
<script>
var state = false;
function toggle() {
if (state) {
document.getElementById("password3").setAttribute("type", "password");
document.getElementById("eye3").classList.toggle("fa-eye");
state = false;
}
else {
document.getElementById("password3").setAttribute("type", "text");
document.getElementById("eye3").classList.toggle("fa-eye-slash");
state = true;
}
}
</script>
HTML
<div class="row align-items-center">
<div class="col-sm-7">
<div class="input-group">
<input id="password" type="password" class="form-control"
placeholder="Enter new passcode" aria-label="new-passcode"
aria-describedby="toggleNewPasscode">
<span class="input-group-text">
<i id="eye" class="fa fa-eye" onclick="toggle()" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="col-sm-7">
<div class="input-group">
<input id="password2" type="password" class="form-control"
placeholder="Enter new passcode" aria-label="new-passcode"
aria-describedby="toggleNewPasscode">
<span class="input-group-text">
<i id="eye2" class="fa fa-eye" onclick="toggle()" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="col-sm-7">
<div class="input-group">
<input id="password3" type="password" class="form-control"
placeholder="Enter new passcode" aria-label="new-passcode"
aria-describedby="toggleNewPasscode">
<span class="input-group-text">
<i id="eye3" class="fa fa-eye" onclick="toggle()" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
But I think the code still can be more simplified, but i am very new to js, and already done many research still cannot found any article talk about this. Anyone could help me? Appreciate! Thanks.