The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page.

   var counter = 0;        

    $interval(function () {            
        counter++;
        doSomething();
        $('#myElem_' + counter).addClass('myClass');
    }, 2000);

    function doSomething() {
        if (counter <= 35) {                
            if (counter == 0) {
                $scope.myIndex = 1;
            } else {
                $scope.myIndex = counter;                   
            }

        } else {
            // not implemented
        }
    }

The CSS class is only applied to the HTML element the first time. The counter functions properly but the CSS class can only be added to the first element.

The HTML page contains unique ID numbers for HTML elements, such as

<div id="myElem_1"></div>
<div id="myElem_2"></div>

Answer №1

It appears that your code is functioning correctly. Keep in mind that the first element will receive the class after a delay of 2 seconds, followed by the second element receiving it after an additional 2-second wait.

Therefore, you will need to be patient for a grand total of 4 seconds in order to observe all changes taking effect.

Answer №2

Make sure to include $scope.$apply(); at the end of your function to update the scope after making any changes:

function PerformAction() {
    if (counterValue<= 35) {                
        if (counterValue == 0) {
            $scope.currentIndex= 1;
        } else {
            $scope.currentIndex= counterValue;                   
        }

    } else {
        // not yet implemented
    }

    $scope.$apply(); // <---be sure to add this line here.

}

If you are modifying scope variables within the above function, don't forget to trigger angular to detect and apply these changes to the scope.

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

Monitoring $scope modifications within a directive: A simple guide

I am currently working with a directive that looks like this: app.directive('selectedForm', function(MainService) { return { scope: { formName: '=currentForm' }, restrict: 'E', ...

What is the best way to enable my array to function properly when assigning non-consecutive numeric indexes using jQuery?

I have a dynamic XML file generated from a database that contains both an ID and a name for each item. It is structured as follows: <item> <id>1</id> <name>FirstName</name> </item> ... and so forth ... I am atte ...

The issue of LazyLoader delay not functioning as expected

I've implemented the LazyLoader plugin on my website using this code: <img src="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.jpg" data-original="http://www.bostonbakesforbreastcancer.org/wp-content/uploads/2012/03/sun.j ...

Difficulty arising from the final column of average sums - Information extracted from JSON using Angular JS

I am facing a problem with calculating the average total. I need to determine the average sum using a specific formula, but the code provided does not calculate the last column of Average. I am looking for a desired result and would appreciate any assistan ...

Trouble with rendering inline images from markdown files in GatsbyJS

I've been trying to include inline images in my markdown file with the gatsby-remark-images plugin. However, I'm facing an issue where the image is not loading on my local host. I'm not sure if it's a syntax error or if I'm missing ...

Directing traffic from one webpage to another without revealing the file path in the Routes.js configuration

Recently starting out in Reactjs and utilizing Material-UI. My inquiry is regarding transitioning between pages using a sidebar, where in Material-UI it's required to display the page in the sidebar which isn't what I desire. var dashRoutes = [ ...

What is the process for submitting a post request with custom fields to the Wordpress rest api?

Currently, I am attempting to make a post request to /wp-json/wp/v2/posts while also including custom fields. However, it seems that although the request field is successfully being sent, the custom fields are not updating with the data I am trying to send ...

Issue with Vue.js - Double curly braces not rendering data on the page

I've recently delved into the world of vue.js Strangely enough, the double curly braces syntax doesn't seem to be rendering for me. However, when I utilize the v-text directive, everything falls into place. Here's a snippet of my code: HTM ...

Issue with customized jQuery UI image organizer

I have customized the jquery ui photo manager example from their website. I am facing an issue where I want the photo to be draggable and also link to an external page. How can I achieve this? I tried wrapping the image with an tag, but it didn't wor ...

What is the best way to determine the appropriate function to invoke using JQuery and Ajax?

I am currently developing a single page application that allows users to run various processes, such as adding new records, updating existing ones, and deleting records when necessary. My main concern is determining the most efficient way to handle these p ...

Adjusting elements within nested JavaScript arrays

When using the code below, an empty array containing 7 empty arrays is expected to be created, essentially forming a 7x7 grid. While accessing elements within nested arrays seems to work correctly, attempting to modify their values causes all elements in ...

Uncovering the Mystery of Undefined Dom Ref Values in Vue 3 Templaterefs

I am currently experimenting with the beta version of Vue 3 and encountering an issue while trying to access a ref in the setup function. Here is my component: JS(Vue): const Child = createComponent({ setup () { let tabs = ref() console.log(t ...

Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/ ...

How to effectively trigger a function to load images in React

When my react app loads, I want the images to load immediately. This involves calling the function collectionChanged(e.target.value) on application start. Inside a .jsx file, there is a function named getHomePage() which contains 4 functions. Upon calling ...

Creating Stunning CSS Animations for a Slider Using SVG

Looking for help to create an SVG CSS animation for a slider using a mockup image. The animation will feature a balloon with a number value that zooms in and out from left to right or right to left. Currently stuck at the starting point and unsure how to ...

Having no issues in receiving successful responses with $.ajax requests, whereas encountering Error-500 when making $http requests

I have been working on a small web application that streamlines the process of creating and filling USPTO IDS forms by retrieving data from another server. To access this data, I am utilizing the following API: . My approach involves using Angular, for wh ...

Extracting information from a designated website using Python, including pages with search functionality and javascript features

Visit the website where you will find a search input box in html. Input a company name into the search box, select the first suggestion from the drop-down menu (like "Anglo American plc"), navigate to the URL containing information about that specific com ...

Issues with GTM web tracking due to conflicts with the jQuery submit function when used in an AngularJS form

I am having trouble getting the Google Tag Manager jQuery script to fire when tracking form submissions. I have removed any AngularJS expressions for privacy reasons. Can anyone provide assistance with this issue? <div id="login_signIn" class=""> ...

Tips for leveraging Bootstrap Collapse alongside KnockoutJS foreach template

I'm working on a template for an inventory page where users can add items to a store. The challenge I'm facing is how to display basic information like name and price initially, and then expand to show more details when clicked. I'm using kn ...

Assign a class to a DIV element depending on the ID of an object using Angular

I'm trying to dynamically add a class to a div based on the id of a field in an object. However, my code doesn't seem to be working as expected. Can someone help me debug this? <ng-container *ngFor="let item of cards"> <d ...