Is there a way to optimize the function used to hide passwords for multiple fields when clicked? Instead of having separate functions for each field, I would like to have one function that is only active on the clicked button. For example, if the toggle button is clicked for the current password field, it should only affect the current password field. The same goes for the new password and confirm new password fields.
<form id="update-password-form" action="" method="post">
<div class="updatepwd"&}gt;
<div class="form-field">
<label for="current-password">Current Password <span class="asterisk">*</span>
</label>
<input type="password" name="current-password" id="passwordField" required>
<span class="toggle-btn" onclick="togglePasswordVisibility()">👁️</span>
</div>
<div class="form-field">
<label for="new-password">New Password <span class="asterisk">*</span>
</label>
<input type="password" name="new-password" id="passwordField1" required>
<span class="toggle-btn" onclick="togglePasswordVisibility1()">👁️</span>
</div>
<div class="form-field">
<label for="confirm-password">Confirm New Password <span class="asterisk">*</span>
</label>
<input type="password" name="confirm-password" id="passwordField2" required>
<span class="toggle-btn" onclick="togglePasswordVisibility2()">👁️</span>
</div>
</div>
<input type="submit" name="submit" value="Submit">
</form>
<script>
function togglePasswordVisibility() {
var passwordField = document.getElementById('passwordField');
var toggleBtn = document.querySelector('.toggle-btn');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleBtn.textContent = '👁️';
} else {
passwordField.type = 'password';
toggleBtn.textContent = '👁️';
}
}
function togglePasswordVisibility1() {
var passwordField = document.getElementById('passwordField1');
var toggleBtn = document.querySelector('.toggle-btn');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleBtn.textContent = '👁️';
} else {
passwordField.type = 'password';
toggleBtn.textContent = '👁️';
}
}
function togglePasswordVisibility2() {
var passwordField = document.getElementById('passwordField2');
var toggleBtn = document.querySelector('.toggle-btn');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleBtn.textContent = '👁️';
} else {
passwordField.type = 'password';
toggleBtn.textContent = '👁️';
}
}
</script>