Script won't run but will in console

Question

I'm stuck at a very annoying problem, it's been bugging me since yesterday.

I have a script to hide my 'intro' by adding a class that contains 'display:none', when a user is still in the same session. Yet, my else if won't work whenever I refresh the page. Copying my code and pasting it in the console however, does work.

jQuery(function($) { // this does the trick and also makes sure jQuery is not conflicting with another library
        if (!window.sessionStorage.gateIntro) {
            $('.intro-wrapper').addClass('intro-wrapper--show');
            $(document).on('click', '.intro-button', function(){
                jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
                sessionStorage.gateIntro = 1;
                setTimeout(function() {
                    $('.container').fadeIn('slow');
                }, 1000);
            });

        // INTRO TIMER
        setInterval(function(){

            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        }, 100);
    }

    else if (window.sessionStorage.gateIntro) {

        console.log('there is a session key!');

        $('.intro-wrapper').addClass('intro-wrapper--hidden');

        $('.container').fadeIn('slow');


    }
});

A few things to keep in mind;

I'm using wordpress and angular, wordpress just as my API to fetch JSON
I made sure my script.js is loaded after the rest of my js in my HTML
Running this script normally does console log 'there is a session key!'
It's only the .addClass() and .fadeIn() that doesn't work!
.intro-wrapper--hide animates my div 150 viewport height to the top, .intro-wrapper-hidden sets it to display none

** EDIT **

My question was being downvoted due to someone thought it was a duplicate to another question about session storage not working ( sessionStorage isn't working as expected ) , but it has nothing to do with session storage, it doesn't run my addClass() and fadeIn() at all.

If someone could help me out and clear things up to me would be great :)

Thanks in advance!

EDIT: probably isn't working because the DOM isn't ready when you're trying to `addClass()` and `fadeOut()` - I suggest you create a named function instead and fire that once `$( document ).ready()` — Lionel Ritchie the Manatee, Dec 30 '15 at 19:27
Aha, I guess so, but how come it does run the 'if' if there is no session key, and if there is one, it will run my if else but it doesn't add a class nor fades in..? — Fabian Tjoe A On, Dec 30 '15 at 19:30
Possible duplicate of [sessionStorage isn't working as expected](http://stackoverflow.com/questions/18319686/sessionstorage-isnt-working-as-expected) — , Dec 30 '15 at 19:31
My code is already inside jQuery(document).ready(function($) {}), does it make a difference once i put it all inside a named function? @LionelRitchietheManatee — Fabian Tjoe A On, Dec 30 '15 at 19:33
see answer for explanation why - you can fast test, by including your function as you have it at the bottom of your document just before your `
` to see if that's the cause, but I imagine it is. — Lionel Ritchie the Manatee, Dec 30 '15 at 19:35

score 0 · Answer 1 · answered Dec 30 '15 at 19:35

You're problem is likely that you're trying to access the DOM before the document is fully ready. width these lines:

$('.intro-wrapper').addClass('intro-wrapper--hidden');
$('.container').fadeIn('slow');

I'd suggest naming your function and calling it once that is done.

// Call Your Function once the DOM is ready
$( document ).ready( function() { setupIntro(); } );

// Name Your Function
function setupIntro() {
    if (!window.sessionStorage.gateIntro) {
        $('.intro-wrapper').addClass('intro-wrapper--show');
        $(document).on('click', '.intro-button', function(){
            jQuery('.intro-wrapper').addClass('intro-wrapper--hide');
            sessionStorage.gateIntro = 1;
            setTimeout(function() {
                $('.container').fadeIn('slow');
            }, 1000);
        });

        // INTRO TIMER
        setInterval(function(){
            var random = Math.floor(Math.random() * 90 + 10);
            var random2 = Math.floor(Math.random() * 90 + 10);
            var random3 = Math.floor(Math.random() * 90 + 10);

            var number = "<p class='number'>" + random + " </p>";
            var number2 = "<p class='number'>" + random2 + " </p>";
            var number3 = "<p class='number'>" + random3 + "</p>";

            $('.intro-timer').empty().append(number, number2, number3);

        }, 100);
    }
    else if (window.sessionStorage.gateIntro) 
    {
        $('.intro-wrapper').addClass('intro-wrapper--hidden');
        $('.container').fadeIn('slow');
    }
}

This will ensure you're not trying to access DOM elements before they exist.

It does run my script, but it still does the same. Also, it doesn't create a session key when I click on my button — Fabian Tjoe A On, Dec 30 '15 at 20:01
Sure thing, thanks anyway. Since it doesn't get the '$' I used 'jQuery' instead. Now it still does the exact same thing (it does create a session key though). — Fabian Tjoe A On, Dec 30 '15 at 20:21
IF you're having issues with the `$` look up `jQuery.noConflict()` — Lionel Ritchie the Manatee, Dec 30 '15 at 20:23
I know, it was the reason it didn't create my session key, now it does ! — Fabian Tjoe A On, Dec 30 '15 at 20:24

Script won't run but will in console

1 Answers1