What is the correct way to toggle an icon button?

Hello everyone! I need help with toggling a font-awesome icon on a button using jQuery or JavaScript. I've tried using jQuery, but the previous icon doesn't get removed from the button when toggling to the new icon. Below is the code snippet:

<button class="btn btn-primary" id="share_screen_button" ng-click="share_screen()"><i class="fas fa-desktop"></i></button>

$scope.share_screen=async () => {
    if ( $scope.roomObject === undefined) return;
    if (screenShareObj === undefined) {
        screenShareObj = await $scope.roomObject.createScreenShareObject();
       
            $("#share_screen_button").removeClass("fas fa-desktop");
            $("#share_screen_button").addClass("far fa-window-close");

    } else {
        screenShareObj.leave();
        screenShareObj = undefined;

        $("#share_screen_button").removeClass("far fa-window-close");
        $("#share_screen_button").addClass("fas fa-desktop");
    }
}

Can someone help me with resolving this issue? Thank you!

javascriptjquerycsstwitter-bootstrapbootstrap-4

Answer №1

It is advisable to refrain from directly manipulating the DOM when working with AngularJS or any other framework. Allow the framework to handle these tasks for you.

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <button class="btn btn-primary" id="share_screen_button" ng-click="toggle()">
    <i ng-class="{'fas fa-desktop':which_class,'far fa-window-close':!which_class}"></i>
    </button>
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
  $scope.which_class=true
  $scope.toggle = function()
  {
    $scope.which_class = !$scope.which_class
    console.log($scope.which_class)
  }
});

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

Responses Loop Continuously Changing

Could someone take a look at this section of my script and provide some feedback? The script is triggered whenever a response is submitted, and its purpose is to turn a column of data containing text strings into clickable hyperlinks to edit each response. ...

javascriptgoogle-apps-scriptgoogle-sheetsgoogle-forms

Positioning pop-up windows using Javascript and CSS techniques

In my web application, there is a search field that allows users to enter tags for searching. The window should pop up directly below the search field as shown in this image: Image I am trying to figure out how the window positioning is actually d ...

javascriptcsshtmlpopup

Passing a parameter from a redirect function to an onClick in React using TypeScript

I am facing a challenge in passing a parameter to my redirectSingleLocker function. This function is intended to take me to the detailed page of a specific locker, identified by a guid. The lockerData.map method is used to display all the JSON data in a ta ...

javascriptjsonreactjstypescript

Utilizing ASP.NET MVC3 to efficiently return multiple JSON lists

My ASP.NET MVC3 C# code is returning a JSON list like this: return Json(new { name = UserNames, imageUrl = ImageUrls }); The variables UserNames and ImageUrls are both of type List<string>. Here is my JavaScript function: function StartSearch(tex ...

c#jqueryajaxasp.net-mvc-3

Changing the content of the initial post in a loop on WordPress

<?php $freeadvice=new WP_Query('category_name=freeadvice&showposts=10'); while($freeadvice->have_posts() ): $freeadvice->the_post(); ?> <li class="event"> <input type="radio" name="tl-group" /> ...

javascriptphpwordpress

Exploring the power of JQuery Ajax and manipulating Object fields

I am trying to figure out how to properly set the value of this field in my code: MyObject = function(){ this.field = null; this.build = function(){ var my_url = "..."; var my_data = "..."; $.get(my ...

jqueryajaxobject

Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Having an issue with checkboxes on a webform. The user must choose options for a purchase by selecting checkboxes and radio buttons. There are 2 radio buttons, numbered 1 and 2, representing the quantity of the product to be purchased. Following those are ...

jquerycheckboxradio-button

What is the right time to use parentheses when calling functions - and when should you leave them

Currently, I am following along with a tutorial at this link and I've come across some syntax that is confusing to me. The goal is to have "hello" logged to the console every time I scroll. function moveCamera() { console.log("hello"); } document. ...

javascriptthree.js

Using NPM packages with vanilla JavaScript can be achieved without the need for an HTML file

Is there a way to include an NPM package in my index.js file without installing it via a package manager? I do not have an HTML file, only the index.js file which is executed with 'node index.js' command. Since I cannot use a CDN, is there any me ...

javascriptnode.jsreactjsnpm

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

javascriptjquerycssgallery

Utilize Java to launch the HTML file in a web browser

I have a specialized need for my HTML files to be displayed on a platform that is browser-free. The solution that immediately comes to mind for me in this scenario is utilizing applet. Therefore, I am interested in having my HTML file (including CSS and JS ...

javahtmlcssswingapplet

What is the best method for uploading and saving a file using AngularJS and ExpressJS together?

I am using a library for AngularJS called angular-file-upload. Despite successfully setting it up and getting image uploads to work, I am facing an issue with passing the file to the server side (express js). Jade: input.form-input(ng-model="userAvatarFi ...

javascriptangularjsexpress

Add jQuery and underscore libraries to an AngularJS component

For my new service, I am incorporating angularjs, underscore, and jQuery: myModule.factory('MyService', ['MyResource', function (MyResource) { .... // Utilizing _ and $ }]); How can I properly inject underscore and jQuery int ...

javascriptjqueryangularjsunderscore.js

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...

htmljquery

What is the best way to navigate to a specific ID on the homepage using a navigation button on another page?

When a navigation button is clicked on any page other than the home page, I want the home page to load first and then scroll to the corresponding id mentioned in the navlink. Below is the code snippet: <Col sm={5}> <Nav className=& ...

javascripthtmlreactjsroutesnavigation

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

htmlcssfragment-identifier

Challenges Associated with Promises in JavaScript

I'm having trouble with the last line of code in my program and I need some help figuring out how to fix it. Specifically, I know that the second "then" statement needs to return resolve() but I'm not sure how to go about implementing this. Any t ...

javascriptecmascript-6es6-promise

Need help with styling for disabled autocomplete? Check out the attached image

I'm currently working with material-ui and react to create a basic form. Everything is functioning properly except for a small UI issue that I can't seem to figure out how to resolve. When I utilize the browser's auto-complete feature, the i ...

htmlcssreactjsmaterial-ui

Using express and sequelize to load different models in a single route

In my express application, I have successfully loaded related bus, family, and person models to supply them separately to the view. Now, I am trying to load the volunteerTypes model and pass it as a separate object to the view. exports.get = (request, res ...

javascriptnode.jsexpresssequelize.js

Addressing a HTML/CSS navigation bar formatting glitch

I have been attempting to replicate the design from , but with the menu positioned at the top of the screen. Despite reviewing tutorials on w3schools and other sources, I am still unable to understand why it is not aligning correctly at the top. Below is t ...

htmlcss