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?
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.
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) andpropertychange(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.
