CODEWITHSUNDEEP
javascriptjqueryhtmltagslang
Dafne Deniz
Dafne Deniz

Reputation: 1

How can I switch the entire HTML file in a browser, by changing the selected language?

To explain my situation more clearly, I have several identical HTML files, the only difference is the language. Each file has its own unique html lang tag. Now, using jQuery or vanilla JS, how can I change the HTML being displayed, based on the language picked by the user?

Upvotes: 0

Views: 278

Answers (2)

sticky_elbows
sticky_elbows

Reputation: 1514

If you don't want to use <a> tags for some reason, try this:

//add event listener to your language buttons with their IDs:
 $('#lang1, #lang2, #lang3').on('click', function(event){

        //identify which language is being clicked
        var langClicked= "#" + $(this).attr('id');
        //take action depending on clicked button
        switch(langClicked){
            case '#lang1':
                //do something when its #lang1
                break;
            case '#lang2':
                //do something when its #lang2
                break;
            case '#lang3':
                //do something when its #lang2
                break;  
        }
    });

Upvotes: 0

Anurag Sinha
Anurag Sinha

Reputation: 1032

There are multiple ways to achieve this. You can have a common html file which will just detect the language. This can be done in some JS function and it depends entirely on how you application is going to provide the language info. Now you can either have an iFrame in that common hTML file and embed you language specific HTML in there. Otherwise if the HTML files are named differently you can reload/redirect the page to the language specific html. There could be other implementations as well such as coding the content of all language specific htmls in one common html. Everything will be hidden(can use css such as display : none;). Later based on the language requested by the user you can make the specific html container visible.

However these methods are not standard and the way you have your file would be difficult to maintain. I would suggest have one file with the language specific contents replaced by variables. Based on the language requested, load the language specific nls file(prop name and value pair) and replace the variables with the actual values.

Upvotes: 1

Related Questions