Не могу изменить значок Font Awesome на щелчке ⇐ Html

[Anonymous]

В моем поле пароля у меня есть значок глаз, который должен измениться на срезанный глаз на щелчок и показывать элементы пароля. Но когда я нажимаю на него, он ничего не делает. Что нужно изменить в моем коде ?? Извините за рвоту. Я подтвердил, что ничто в моем CSS, кажется, не переопределяет какие -либо изменения < /p>
html: < /p>



SIGN UP

type="text"
id="signupFirstName"
placeholder="First Name"
required
/>










type="password"
id="signupConfirmPassword"
placeholder="Confirm Password"
required
/>




SUBMIT





< /code>
js: < /p>
document.addEventListener('DOMContentLoaded', () => {

// Toggle password visibility
document.querySelectorAll('.toggle-password').forEach(icon => {
icon.addEventListener('click', () => {
console.log('Eye icon clicked, toggling!');
const targetId = icon.getAttribute('data-target');
const input = document.getElementById(targetId);
if (!input) return;

const isHidden = input.type === 'password';
input.type = isHidden ? 'text' : 'password';

// Toggle icon class
icon.classList.toggle('fa-eye');
icon.classList.toggle('fa-eye-slash');
});
});


Подробнее здесь: https://stackoverflow.com/questions/796 ... n-on-click