Immediately Invoked Function Expression For Page Defaults

Question

I've tried to setup a very "vanilla" approach to this but cannot get the result.

I'm trying to reach into the DOM and the associated div styles using JS and effectively change the "display" property of the CSS.

The JS is error free but the CSS doesn't change.

 (function() { var singleCard = document.getElementById('card-container'); var manyCard = document.getElementById('card-container-many'); var allCard = document.getElementById('card-container') && document.getElementById('card-container-many'); var singleCardCss = document.querySelector('#card-container'); var manyCardCss = document.querySelector('#card-container-many'); var allCardCss = document.querySelector('#card-container') && document.querySelector('#card-container-many'); if (singleCardCss.display && manyCardCss.display === 'none') { allCardCss.display = 'block'; } else { allCardCss.display = 'none'; } }()); 

 #card-container { position: relative; display: none; width: 280px; height: 310px; background-size: 640px 360px; background-repeat: no-repeat; border: 1px solid #222; border-radius: 10px; margin: 10px; cursor: pointer; } #card-container-many { position: relative; display: none; width: 280px; height: 310px; background-size: 640px 360px; background-repeat: no-repeat; border: 1px solid #222; border-radius: 10px; margin: 10px; cursor: pointer; } 

 <div class="container-fluid text-center"> <div id="card-container"></div> </div> <div class="container-fluid text-center"> <div id="card-container-many"></div> </div> 

Answer 1

Your error is very common. You have to remove the last ) after your function. You close your IIFE after calling it. You can try but your function will be never call! You also can try to delete your variable allCardCss and allCard. I do not understand why do you initialize them with &&.

Replace:

(function() {
    var singleCard = document.getElementById('card-container');
    var manyCard = document.getElementById('card-container-many');
    var allCard = document.getElementById('card-container') && document.getElementById('card-container-many');

    var singleCardCss = document.querySelector('#card-container');
    var manyCardCss = document.querySelector('#card-container-many');
    var allCardCss = document.querySelector('#card-container') && document.querySelector('#card-container-many');

    if (singleCardCss.display && manyCardCss.display === 'none') {
        singleCardCss.display = 'block';

    } else {
        allCardCss.display = 'none';
    }
}());

By:

(function() {
    var singleCard = document.getElementById('card-container');
    var manyCard = document.getElementById('card-container-many');


    var singleCardCss = document.querySelector('#card-container');
    var manyCardCss = document.querySelector('#card-container-many');


    if (singleCardCss.display && manyCardCss.display === 'none') {
        singleCardCss.display = 'block';
        manyCardCss.display = 'block';
    } else {
        singleCardCss.display = 'none';
        manyCardCss.display = 'none';
    }
})();

Answer 2

The .style property is missing. For example:

 allCardCss.style.display = 'block';

Also, the use of the AND operator is wrong I believe. It should be used in the if condition like so:

if (singleCardCss.style.display === "none" && manyCardCss.style.display === 'none') {...

Each side of the operand must be complete in a conditional even when it's a comparison between 2 objects ( singleCardCSS and manyCardCSS ) vs. the same condition ( "none" ).

I took a third look and saw that allCardCSS is wrong as well, it should be:

var allCardCSS = document.querySelectorAll('div > div');

The result will be a NodeList of all divs that are a child of another div ( singleCardCSS and manyCardCSS ). This NodeList is an array-like object which you can do simple iterations upon in order to access the objects within. Notice how the for loop goes through the NodeList allCardCss .

Finally on the last statement has been eliminated because the else isn't needed since they are already .style.display="none" . The first statements have been eliminated as well because .getElementById('ID') is identical to querySelector('#ID');

One last thing, I almost forgot about the parenthesis business:

Either of the following two patterns can be used to immediately invoke a function expression, utilizing the function's execution context to create "privacy."

(function(){ /* code */ }()); // Crockford recommends this one

(function(){ /* code */ })(); // But this one works just as well  

- Ben Alman

So you are ok. The point is that if you have a set of extra parenthesis at the end then that'll be interpreted by the browser as an E xpression F unction which causes an I mmediate I nvocation*. The mention of privacy is referring to the IIFE with a closure which doesn't apply in your circumstance unless you make the latter part of the code into a function in which case you have a closure. In your case it's not needed since you aren't passing any variables from the outside of your function.

To those more knowledgeable. If there's anything I've said that to the contrary or omitted, please leave a comment with your downvote.

*it's IIFE a little mixed up in order in sentence but you get the picture 😉

Demo

 (function() { var singleCardCss = document.querySelector('#card-container'); var manyCardCss = document.querySelector('#card-container-many'); var allCardCss = document.querySelectorAll('div > div'); if (singleCardCss.style.display === "none" && manyCardCss.style.display === 'none') { for (let i = 0; i < allCardCSS.length; i++) { allCardCss[i].style.display = 'block'; } } }()); 

 #card-container { position: relative; display: none; width: 280px; height: 310px; background-size: 640px 360px; background-repeat: no-repeat; border: 1px solid #222; border-radius: 10px; margin: 10px; cursor: pointer; } #card-container-many { position: relative; display: none; width: 280px; height: 310px; background-size: 640px 360px; background-repeat: no-repeat; border: 1px solid #222; border-radius: 10px; margin: 10px; cursor: pointer; } 

 <div class="container-fluid text-center"> <div id="card-container"></div> </div> <div class="container-fluid text-center"> <div id="card-container-many"></div> </div>