Function doesnt work when variables are first

Question

I got into weird problem, here is my code

$(document).ready(function(){
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });

})
var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;

^ this works

When my code is like this, everything works fine, but when I move variables on first spot, my javascript stops working.

var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;
$(document).ready(function(){
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });

^ this doesnt work

Does anyone know why? It makes no sense to me. And I know that my code could be simplier, I'm working on it. :)

Thank you and have a nice day

I have checked the console and there was nothing unusual, also what do you mean by closest, Thank you. :) — Kyrbi, Mar 23 '16 at 07:49
instat of parent().parent().parent() use closest() and your variable linked may be null if the page hasn't loaded completely — madalinivascu, Mar 23 '16 at 07:50

score 0 · Answer 1 · answered Mar 23 '16 at 07:52

0

I think the below part of code is breaking

var anchor = window.location.hash.substring(1);
var linked = $("#"+anchor).index()+1;

Please check the console. The substring might have returned some value and jquery is not able to find the DOM element. Once a javascript error occurs, the remaining part of the code will not get executed. Console errors will help you to know the root cause

answered Mar 23 '16 at 07:52

mgopi

59
1
4

This should be a comment. Also, OP has already confirmed that there is no errors in console. – Rajesh Mar 23 '16 at 07:53
I agree with you Rajesh, as i started typing the answer. By the time I submitted, there were comments shown – mgopi Mar 23 '16 at 07:54

score 0 · Accepted Answer · 2016-03-23T08:01:13.747

0

I think it's because it's outside the $(document).ready()

The browser will load that function first when the page loads leaving the variables out of the function which would mean their value would be null.

To get it as a global do:

var Foo = {};

$(document.ready(function() {
    Foo.anchor = window.location.hash.substring(1);
    Foo.linked = $("#"+anchor).index()+1;
    // rest of code
});

edited Mar 23 '16 at 08:01

answered Mar 23 '16 at 07:54

I guess either way, those variables would be global variables and will be called before document.ready. If one is working fine, other should work as well – Rajesh Mar 23 '16 at 07:56
I need to have these two as global variable. – Kyrbi Mar 23 '16 at 07:57
1

@Kyrbi for your reference [global variables](http://stackoverflow.com/questions/2613310/ive-heard-global-variables-are-bad-what-alternative-solution-should-i-use) – Rajesh Mar 23 '16 at 08:00

score 0 · Answer 3 · answered Mar 23 '16 at 08:00

I found solution to my problem. I was looking for something before the document was loaded. So this is how I fixed it.

var anchor = window.location.hash.substring(1);
var linked = "";
$(document).ready(function(){
    linked = $("#"+anchor).index()+1;
    $(".switch-content div:first-child").fadeIn();
    $(".switch-content div:first-child").toggleClass("switch-active");
    $(".switch-menu ul li").click(function(){
        var clicked = $(this).index()+1;
        $(this).parent().find("li.switch-active").toggleClass("switch-active");
        $(this).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div.switch-active").fadeOut();
        $(this).parent().parent().parent().find(".switch-content div.switch-active").toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).toggleClass("switch-active");
        $(this).parent().parent().parent().find(".switch-content div:nth-child("+clicked+")").delay(200).fadeIn();
    });
})

Thank you guys for helping me realize my mistake. :)

Function doesnt work when variables are first

3 Answers3