0

I am trying to write a simple conditional that says if div1 is displayed, then change div2's display to none. However, I want this to be updated live. So anytime div1 display is 'grid', div2 disappears from sight.

<script>
    if($('.div1').css("display") == "grid") {
        $('div2').css({"display":"none"});
        }
</script>

What am I doing wrong here?

stephan
  • 2,293
  • 4
  • 31
  • 55

2 Answers2

2

A block of javascript code will not just magically run whenever convenient for you, unless you make it so that it is run in such a way. What you have written will just run once, and move on. Javascript will not by itself will look for when things change.

You need to track the change and run your code after that change. If you are writing the javascript for a site, you probably know when these changes occur, so you can execute your code block when they do occur. For example if div1 changes to grid when user clicks a button, then you can bind your function to its click event so handle the situation.

A more advanced method would be to watch for changes on DOM and run a function when they occur. You can do this with MutationObservers. You can do precisely what you want, if div changes to grid, run myFunction() for example.

Another method would be to have a function run on intervals but this is an obsolete technique which is prone to errors and crashes and is by no means recommended to be used in javascript.

Ozan
  • 3,709
  • 2
  • 18
  • 23
1

The $.watch plugin can do this:

$('.div1').watch('display', function() {
    var display = ($(this).css('display') === 'grid' ? 'none' : 'block');

    $('.div2').css('display', display);
});

Unlike the setInterval method, here's what the library does (from the github page):

This plugin lets you listen for when a CSS property, or properties, changes on element. It utilizes Mutation Observers to mimic the DOMAttrModified (Mutation Events API) and propertychange (Internet Explorer) events.

Be aware that your original code uses $('div2') instead of $('.div2') and will only match elements that look like this: <div2>foo</div2>. I've changed it to a class in my example.

h2ooooooo
  • 39,111
  • 8
  • 68
  • 102
  • 1
    I don't understand this. what does this do exactly? – stephan Feb 03 '15 at 20:27
  • @Dr.Donnaloia It uses mutation observers if they're available and if they're not it uses IEs propertchange event. It's just an already built wheel made so you don't have to. – h2ooooooo Feb 03 '15 at 20:29
  • so the watch function above is just checking for any property changes? and then if there's a change, (display, display)? – stephan Feb 03 '15 at 20:45
  • @Dr.Donnaloia correct. Thus is way better than constantly checking. – h2ooooooo Feb 03 '15 at 20:46
  • And in case you're wondering about the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) – h2ooooooo Feb 03 '15 at 20:48
  • Will you help me with this codepen example so I can understand? http://codepen.io/donnaloia/pen/YPrvod – stephan Feb 03 '15 at 22:46
  • so I want to change the font color of "hello" when clicking button, and then change the font color of "goodbye", whenever the "hello" color is changed. – stephan Feb 03 '15 at 22:47
  • You're going very wrong with this then. Use the .data() function to set a state and invert it when you click it – h2ooooooo Feb 03 '15 at 22:48
  • this is strictly an example for the sake of learning, I understand that this is not an efficient way to change font color! Again, I am just trying to learn how the code you pasted above works. – stephan Feb 03 '15 at 23:18