Question

I have several .js files each containing different functions and several HTML files showing different parts of the website. I declared a variable in main.js called var lang = “ENG”. However, this is the default language in case the user doesn’t select a language to change the content of the website. If I were to click a button in index.html:

<button id="french" onclick="changeLang('French')">French</button>

It should change the language of the var lang to “FRE” permanently for the rest of the current browsing period. I have tried using innerHTML, a click listener, a function returning the new value (i.e. var lang = setLanguage(inp), but nothing seems to work. Would anyone please give a suggestion on this? I am working off a large existing code database so I would like something that works in this context (currently not better ways of implementing a “language” facility in the website), although that would certainly be an improvement I would work on long-term. Thanks!

Answer 1

If I understand correctly, you want the information to persist even as new documents are loaded. There is no ‘duration of the program’ as far as each individual document is concerned, but you can store data across a session by writing and reading from the sessionStorage object.

Set:

sessionStorage.setItem('language', 'FRE');

Get:

var language = sessionStorage.getItem('language');

You could also use cookies, which may be necessary if you need to support old timey browsers.

Edit:
On re-reading your question, I realized it sounds like you were unable to set the language variable at all, much less across the whole browser session. If that’s the case, I suspect you’re running into a variable scope problem. Maybe show us the changeLang function? For example if lang is declared at the global scope, the setting function should not use ‘var’ or else it will be creating a new variable with that name in its local scope only.

var lang = 'ENG';
function changeLang(newLang) { lang = newlang };