Can't change Font Awesome icon on click?

Question

I am trying to change a font awesome icon using a toggle, however, nothing seems to be working and i am not sure why?

(HTML)

<span class="change-icon"><i class="far fa-eye" id="password-see"></i></span></div>

(CSS)

.change-icon {
    cursor: pointer;
}

(Javascript)

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

Any help would be greatly appreciated!

Answer 1

Your problem is that you try to get the html element .change-icon but you try to get it with $('change-icon') instead of $('.change-icon') where the dot is representing that it is a class

Change this:

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

To this:

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

And i would change $('i') to $('#password-see')

Answer 2

Try this

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

Answer 3

Try this bro

 $(document).ready(function () {
        $('.change-icon').click(function (event) {
            $(event).find('i').toggleClass('far fa-eye far fa-eye-slash');
        });
    });