Home/ Questions/Q 9246437
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:29:18+00:00

I have a javascript file named js/jsClasses.js which is relative to to the index.html

  • 0

I have a javascript file named js/jsClasses.js which is relative to to the index.html file.

This file has some nested functions. Here’s the code –

function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
var langSetting;
this.setLanguage = function(){
    langSetting = "en-GB";
    console.log(langSetting);
}
this.getLanguage = function(){
    return langSetting;
}

}

I need to set the value of the variable langSetting in index.html. This will be the global variable and in all the subsequent pages, I need to access the value of langSetting and load the page in the corresponding language.

At the moment, this is how I am trying to access the js/jsClasses.js file from index.html

<html>
    <script src="js/jsClass.js">
        var object1 = new JSClass();
        object1.setLanguage();
        object1.getLanguage();
    </script>



</html>

When I click the button, nothing happens. Can someone please help ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are two ways to solve this, a bad and common one and a good one,

    The bad one is to remove the var key word from langSetting which would make it langSetting a global varaible.

    The good one is to have JSClass return langSetting or more broadly an object revealing what it, as a module is willing to reveal, this is called the revealing module pattern, here is an excellent book chapter on it by Google developer Addy Osmani

    Here is a good solution in your case:

    var jsClass= function(){


    var langSetting = "en"; // this is javascript's version of a private variable, it is 'closed' in your jsClass

    var getLanguage = function(){
        return langSetting;
    }

    var setLanguage = function(){
        navigator.globalization.getPreferredLanguage(function (language){
            langSetting = language.value; //set the local variable
            console.log(langSetting);
        }, function(){
            console.log("there was an error");
        });
    }
    return {
        getLanguage:getLanguage,
        setLanguage:setLanguage
    };
}

    Then in your code you can do

    var obj = new jsClass(); // is exactly the same as var obj = jsClass , when functions return objects it doesn't matter if you use the 'new' keyword
obj.getLanguage(); //returns en

    Another solution would be to use the constructor pattern. Some consider the constructor pattern as a mistake made to implement java developers migrating to javascript although it is widely used in the industry and in a lot of libraries. This would look the following way:

    function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
    var langSetting;
    this.setLanguage = function(){
        //setter code here
    }
    this.getLanguage = function(){
        //getter code here
    }
}

    and then use the new keyword, it would look like:

    var myClass = new JSClass();
myClass.getLanguage();//getter result

    Also, note I’m noticing that you’re using Apache Cordova API for globalization, please note that makes setLanguage asynchronous, so you might want to have it accept a callback parameter which means you get to ‘hook’ on when it completes. See This stackoverflow question for more details on callbacks and how to use them.

    • 0