calling an external JS function from an external file

Question

Okay so here is the situation.

I have a language toggle link embedded into a page, it changes the string of the URL from -eng.shtml to -fra.shtml along with the Alias value.

Now basically in the header i'm calling two scripts:

<script type="text/javascript" src="/js/langDB.js"></script>
<script type="text/javascript" src="/js/langToggle.js"></script>

LangToggle.js has a function within langDB.js but when the function programmed into langDB.js is called it doesn't quite work as expected, it's function should be to change the variable value from one to another.

Toggle code:

function js_changeit(){

    //Get the current page full URL 
        var mainName = String(window.location);

    //Base name
        var slash = mainName.lastIndexOf("/");  
        var dot = mainName.lastIndexOf(".");
        var quest = mainName.lastIndexOf("?");
        var name = mainName.substring(slash+1,dot);
        var ext = mainName.substring(dot,mainName.length);

    //Remove the _f is it exists
        var lang = name.substring(name.length-3,name.length);

    //Detect the site sections, get the current site title and the site primary alias strings
        var SiteSection = mainName.split("/");
        var currentAlias = SiteSection[3];
        var currentSite = SiteSection[2];

    //Split the url from Site to the end Alias section
        var siteSectionAlias = "http://" + currentSite + "/" + currentAlias + "/";
        var SectionaAlias = mainName.split(siteSectionAlias)
        var htmlFullDocFilename = SectionaAlias[1];

    //Extract the filename without the extension
        var shtmlLastPos = htmlFullDocFilename.lastIndexOf(".shtml");
        var docTitle = htmlFullDocFilename.substring(0,shtmlLastPos-4);     

    //Alias Toggles, when an alias is detected in the conditional list, switch to the other.


    langToggle();

    // Main Page
        if (lang != "eng") {
            window.open("http://" + currentSite + "/" + currentAlias + "/" + docTitle + "-eng" + ext, "_self");
        } else {
            window.open("http://" + currentSite + "/" + currentAlias + "/" + docTitle + "-fra" + ext, "_self");
        }
    }

function in langDB.js:

function langToggle() {
    switch(currentAlias) {
    //Switch the variable from English to French and vice versa depending on the current page's URL string when the toggle js link is clicked
        //If ENGLISH switch the variable to French
        case "about-us": 
            currentAlias = "a-notre-sujet"; break;
        //If FRENCH switch the variable to French
        case "a-notre-sujet": 
            currentAlias = "about-us"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "facilities-and-security": 
            currentAlias = "installations-et-securite"; break; 
        case "installations-et-securite": 
            currentAlias = "facilities-and-security"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "offenders": 
            currentAlias = "delinquants"; break; 
        case "delinquants": 
            currentAlias = "offenders"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "you-and-csc": 
            currentAlias = "scc-et-vous"; break; 
        case "scc-et-vous": 
            currentAlias = "you-and-csc"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "connecting": 
            currentAlias = "etablir-des-liens"; break; 
        case "etablir-des-liens": 
            currentAlias = "connecting"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "resources": 
            currentAlias = "ressources"; break; 
        case "ressources": 
            currentAlias = "resources"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "international-transfers": 
            currentAlias = "transferements-internationaux"; break; 
        case "transferements-internationaux": 
            currentAlias = "international-transfers"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "educational-resources": 
            currentAlias = "ressources-pedagogiques"; break; 
        case "ressources-pedagogiques": 
            currentAlias = "educational-resources"; break;
        /* -------------------------------------[ See the first two comments ]---------------------------------- */
        case "cfp": 
            currentAlias = "pfc"; break; 
        case "pfc": 
            currentAlias = "cfp"; break;
    }
}

when ever I'll click the language toggle link IE will give me an error that "currentAlias" is undefined, basically the value of the variable doesn't seem to load into the function called from an external script...

I'm not quite sure what I'm doing wrong...

Might I suggest some reading: codeproject.com/Articles/182416/… - see the section on Scope :) You have a LOT of locally scoped variables in that function that seem to do little for you and might be better as an "object property" — Mark Schultheiss
– Mark Schultheiss, Commented Nov 2, 2012 at 18:43

T.J. Crowder · Accepted Answer · 2012-11-02 18:47:07Z

4

when ever I'll click the language toggle link IE will give me an error that "currentAlias" is undefined...

That's because currentAlias is a local variable within the js_changeit function. langToggle can't access local variables within js_changeit.

~~If your code really needs access to it, and these really have to be separate files, you'll have to have js_changeit put it in the global namespace (a property on window):~~

window.currentAlias = currentAlias;

...and then use it from there. And you'll need to be sure that js_changeit runs before langToggle so the code putting it on window runs.

(I'm saying "global variable" and "property on window" interchangeably because all global variables are properties on the single [unnamed] JavaScript global object, and on browsers that object is accessible from the global variable window [window is a property pointing back to the object it's a property of].)

~~But if langToggle needs access to it, some refactoring may be appropriate, not least so you can avoid adding even more global symbols.~~

Sorry, just looked again at your code and saw that js_changeit calls langToggle. So the much, much better solution is for js_changeit to pass currentAlias into langToggle as an argument. No need for a global variable.

So change this line in js_changeit:

langToggle();

to:

currentAlias = langToggle(currentAlias);

And change langToggle so it accepts currentAlias as an argument and returns the updated value for it.

The bit where you're going astray is that a function doesn't inherit variables from the scope where it's called, it inherits them from the scope where it's defined. So currentAlias doesn't exist for langToggle because it's not declared in the scope where langToggle is declared.

Let's take a simpler example:

function foo() {
    var answer = 42;

    bar();
}

function bar() {
    console.log(answer); // <== Error, `answer` is not defined
}

bar is called from foo, but doesn't inherit foo's variables. If foo wants to communicate something to bar, it would usually pass it in as an argument:

function foo() {
    var answer = 42;

    bar(answer);
}

function bar(a) {
    console.log(a); // This is fine
}

So then, if we call foo, bar will log "42".

Similarly if bar needs to communicate something back to foo, it will normally do that by returning a value:

function foo() {
    var answer = 42;
    var b;

    b = bar(answer);
    console.log(b);
}

function bar(a) {
    console.log(a);
    return a * 2;
}

Now if we call foo, bar will log "42" and foo will log "84".

There are other ways for foo and bar to share information (object properties, closures), but if you're new to this stuff that's plenty to be getting on with for now. :-)

edited Nov 2, 2012 at 18:47

answered Nov 2, 2012 at 18:31

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

TwoXTwentyOne Over a year ago

Sorry I'm very new to coding. Where exactly should I type window.currentAlias = currentAlias; ??

T.J. Crowder Over a year ago

@user1795138: Actually, I just noticed something and updated the answer. No need for a global variable, see the update.

TwoXTwentyOne Over a year ago

Okay so changed the code as you mentioned: currentAlias = langToggle(currentAlias); and in langToggle.js I changed function langToggle() { to function langToggle(currentAlias) { now if I hit the toggle it'll change the alias in the url tö "undefine" as in internet/undefined/index-fra.shtml instead of internet/a-notre-sujet/index-fra.shtml

T.J. Crowder Over a year ago

@EricSP: Sounds like there's more going on. I've added some simplified examples of communication between functions above. Hopefully that will help you sort things out.

TwoXTwentyOne Over a year ago

Sorry, I'm extremely lost... So I shuld make js_changeit(currentAlias) and then...? Hmmm I really can't wrap my head around this. Will need to review it a few times.

|

Mike Brant · Accepted Answer · 2012-11-02 18:34:39Z

0

Well, you should take the error message exactly as it is. If you look at your langToggle function, you immediately try to reference currentAlias, but it has not been defined yet in the function's scope.

I see you have defined it in the scope of function js_changeit, but the declaration would only be available in the scope of that function not in the langToggle function scope.

answered Nov 2, 2012 at 18:34

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Collectives™ on Stack Overflow

calling an external JS function from an external file

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related