Having trouble changing the Font Awesome icon on click?

I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue?

(HTML)

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

(CSS)

.toggle-icon {
    cursor: pointer;
}

(Javascript)

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

Any assistance or guidance would be highly appreciated!

javascripthtmlcssfont-awesome

Answer №1

The issue lies in attempting to select the html element .change-icon with $('change-icon') instead of $('.change-icon'), where the dot indicates that it is a class.

Replace this:

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

With this:

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

Also, consider changing $('i') to $('#password-see')

Answer №2

Give this a shot

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

Answer №3

Give this a shot man

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stepping up Your Next.js Game with the Razorpay Payment Button Integration

When using the Razorpay payment button on a website, it provides a code snippet like this: <form> <script src = "https://cdn.razorpay.com/static/widget/payment-button.js" data-payment_button_id = "pl_FNmjTJSGXBYIfp" data ...

javascriptreactjsnext.jsrazorpay

Creating a visual representation of the information stored in my JSON data file using a Quasar table

As a VueJS student, I'm struggling to display the distances from my JSON file in a table. What is the best way to retrieve and show all the distance data for "5" and "10" by both walking and driving? Should I use this code: this.concurrentsRows = JSO ...

javascriptvue.jsquasar-frameworkquasar

Organize data in a Vue.js table

Currently facing an issue with sorting my table in vue.js. Looking to organize the table so that campaigns with the highest spend are displayed at the top in descending order. Here is the code I'm working with: <template> <div class=" ...

javascripthtmlvue.js

Get all the counter values from a Bootstrap table within a function

Suppose I have a table displaying 25 records per page with 10 rows. How can I update the counter values for Entries and Total Entries in my function when I filter by "india"? I already have the showing values but need to retrieve the Entries and Total Ent ...

htmljquerytwitter-bootstrap-3

Display the header on every single page using puppeteer

            Whenever I enable displayHeaderFooter, the header does not display. It only works if I add margin to @page in my CSS, but this causes the page height to increase by the margin value and content to overflow beyond the page boundaries. Is ...

javascriptnode.jspuppeteer

enhancing look of external tool

I have a third-party widget with inline CSS that displays a table on my website. Is there a way to strip out the inline CSS from the widget before adding it to my page so that only my custom css file styles are applied? The HTML structure of the widget i ...

javascriptjquery

What is the best way to insert an <image> tag into the SVG DOM?

Currently, I am facing an issue with adding a background image to the generated SVG DOM in my web page. The user interacts by drawing an SVG doodle on top of a jpg image using Raphael. After the user is done with their drawing, I want to enable them to sa ...

javascriptjquerysvgraphael

It is impossible for tailwind to overflow while attempting to adjust the menu to the screen size

Here is the full code snippet: https://jsfiddle.net/3Lapnszc/1/ I am attempting to adjust the left navigation menu on the screen. <main class="flex flex-grow w-full h-screen"> <aside class="w-80 h-screen bg-gray shadow-md w-full hidden sm: ...

htmlcsstailwind-css

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

css

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

Dynamic Visualizations with D3.js: Live Charts for Real-Time

This is my first time using D3.js and I am attempting to create a basic sparkline graph. The graph should have time on the X-axis and numbers up to 1000 on the Y-axis. I have a web socket server that sends random numbers up to 1000 to clients. My goal is t ...

javascriptjqueryangularjssvgd3.js

What is the best way to choose the next adjacent element using a CSS selector with Python Selenium?

The structure of the DOM is as shown below: <ul> <li> <a href="#" role="button" class="js-pagination link" data-page="1">1</a> </li> <li> <a href="#" role="button" class="js-pagination link active" data ...

javascriptjqueryhtmlcssselenium

Unable to change the value of Apexcharts components

Utilizing the Vue.js framework along with the Apexchart library, I have been able to create scatterplots for my data. By making use of Axios, I can successfully transmit my data and monitor it using console.log(). With the help of Apexcharts property updat ...

javascriptvue.jsvuejs2vue-componentapexcharts

Retrieve all tags that come after a specific <a> tag inside a <td> element using Scrapy

Looking to extract information from this specific webpage using Scrapy: My goal is to retrieve the summaries from the GeneCard, which are structured in HTML as follows: <td> <a name="summaries"></a> <br > <b>Entr ...

pythonhtmlscrapy

Maintain the div's aspect ratio by adjusting its width according to its height

I am seeking a way to maintain the width of the .center div in relation to its height, following a 4:3 aspect ratio (4 units wide for every 3 units high). The height of the div should be set to 100%, and I also need to align the div horizontally at the cen ...

csshtmlheightwidth

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Can't figure out why the render isn't triggering after running addSimpleProperty in this code. Been staring at it for a while now and think it might have something to do with extendObservable. const {observable, action, extendObservable} = mobx; ...

javascriptreactjsmobx

"Unlocking the potential of JSON: A guide to retrieving and displaying three specific fields in

My PHP service is returning the following data: [[1,"16846"],[2,"16858"],[3,"16923"],[4,"16891"]] Within my HTML, I have ajax set up to fetch this information; $.ajax({ type: 'POST', url: 'getDadosGrafico.php', ...

javascriptphpjqueryjsonajax

Unable to add key/value pair to object in Node

While using Node, I encountered a strange issue where I was unable to attach the key/value pair broadcastStamp = date to the object "result." Despite confirming that it is indeed an object with typeof, no errors were thrown - the key/value simply did not a ...

javascriptnode.js

CSS is not referred to as animation

Every time we hit a key, the dinosaur receives a jump class that should activate an animation. Unfortunately, the animation does not play. animation not functioning <!DOCTYPE html> <html lang="en"> <head> <meta c ...

css

Pass user input values to PHP via AJAX and display the outcome on a designated div

I am currently working on a project where I need to send an input value to a PHP script and display the returned value in a div using AJAX. However, I seem to be struggling with getting it to work properly. Any assistance or suggestions would be greatly ap ...

phpjavascriptjqueryajax