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:

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...

T.J. Crowder · Accepted Answer

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. :-)

calling an external JS function from an external file

Answers (2)

Related Questions