CODEWITHSUNDEEP
javascriptjquery
ATN54
ATN54

Reputation: 137

JQuery/JavaScript addClass doesn't work

I have a div which contains elements. When I click on one element an action will occur. During the action time I want to make my div colors change to black & white and after the action it will reset the color.

So I create a simple css3 class :

gray {
    background-color:red;
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

And in my script I have two functions : 

function enableWaitState( ) {
   $($("#chart")).addClass( "gray"); 
}

function disableWaitState( ) {
    $($("#chart")).removeClass( "gray");
}

in my javascript code I write the method which is called when clicking on a button:

function back() {
    enableWaitState( ); 
    // here doing some javascript code
    disableWaitState(  );
}

}

Unfortunately it doesn't work. But If I make an ajax call between enableWaitState() and disableWaitState(), it works!

Any ideas?

Upvotes: 0

Views: 1256

Answers (4)

ATN54
ATN54

Reputation: 137

OK, I found the solution

My probleam was :

function back() {
    enableWaitState( ); 
    // here doing some javascript code
    disableWaitState(  );
}

The UI was never updated.

The solution is :

        enableWaitState( depth); 
        setTimeout( function() {        
          // here doing some javascript code...
        disableWaitState( depth );
       }, 50 );

Explanation : The function enableWaitState() add a class in the DOM and BECAUSE the javascript code now wait 50 milliseconds before running the UI has the time to refresh itself.

Upvotes: 0

Chaitanya Ghule
Chaitanya Ghule

Reputation: 451

As per your requirement of enabling and disabling background-color of div, i think that you want a blink effect when user clicks on elements within div.

Just check the code snippet below.

function blinkEffect() {
  let elem = '#chart';
  $(elem).addClass('gray');

  setTimeout(function() {
    $(elem).removeClass('gray');
  }, 200);
}

$('#btn1, #btn2, p').on('click', function() {
  blinkEffect();
});
div {
  width: 600;
}

.gray {
  background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='chart'>
  Some elements in this div to change background color on click and reset it after 200ms<br><br>
  <button id='btn1'>Btn 1</button><br><br>
  <button id='btn2'>Btn 2</button>
  <p>Welcome..<br>I am a paragraph...!!! <br>Click me to see the change</p>
</div>

Hope, it works for you.

Upvotes: 0

gbu
gbu

Reputation: 56

Try this

 function enableWaitState() {
   $("#chart").addClass("gray"); 
 }

function disableWaitState() {
    $("#chart").removeClass("gray");
 }

Upvotes: 0

Beri
Beri

Reputation: 11620

You need to remve additional $() from your selector.

function enableWaitState( ) {
   $("#chart").addClass( "gray"); 
}

function disableWaitState( ) {
    $("#chart").removeClass( "gray");
}

Also this code will work only after chart element is loaded in the DOM. You can use console to check that:

 console.log($("#chart").length)

Upvotes: 1

Related Questions