0

I'm trying to dynamically change some h1 text depending on a parameter from url. I'm not sure how to concatenate text together to make a new variable.

Here is my code:

$.getScript("/js/bannerText.js", function(){
    var mainTitle = prefLang+'Main';
    console.log(mainTitle); // I want this to be "Main Text English"
});

Inside bannerText.js I have different translations:

var enMain  =   "Main Text English";
var enSub   =   "Sub Text English";

prefLang gets the language code from the URL. In this case it is en. Thanks for the help.

1
  • Try with window[prefLang+'Main'] Commented Aug 27, 2014 at 10:10

1 Answer 1

1

You can use the JavaScript brace notation [] to access a variable with a variable name:

// declare some global variables
var foo = 'foo value';
var bar = 'bar value';
var baz = 'baz value';

// <parenthesis>
// For information, the line below (when executed in global scope ONLY):
var x = 'x'
// is equivalent to this:
window.x = 'x'
// </parenthesis>


// choose what variable you want to use
var varName = 'bar';


// use 'varName' to retrieve the value
var theValue = window[varName];
console.log(theValue);

// here's the step by step of what's happening
theValue = window[varName];
// equals to
theValue = window['bar'];
// which get executed as
theValue = window.bar;
// which is the same as (see parenthesis above)
theValue = bar ;
// then finally
theValue = 'bar value';

So, you're problem could be solved as follow:

// declare some global variables
var enMain  =   "Main Text English";
var enSub   =   "Sub Text English";

// choose what variable you want to use
var prefLang = 'en';
var varName = prefLang+'Main';

// use 'varName' to retrieve the value
var mainTitle = window[varName];
console.log(mainTitle); // "Main Text English"

However, I think you're doing some internalization process, and without the help of external libraries, I would do it that way:

// step 1) declare all your texts

var availableTexts = {
};

availableTexts.en = {
    Main: "Main Text English",
    Sub: "Sub Text English",
};
availableTexts.es = {
    Main: "Texto principal Español",
    Sub: "Texto secundario Español",
};
availableTexts.fr = {
    Main: "Texte principal en français",
    Sub: "Texte secondaire en français",
};
// and so on...


// step 2) get the value from URL
// I hard code it here just for the demo
var prefLang = 'en';
// define a fallback language if the language
// you're looking for does not exist
var defaultLang = 'en';


// step 3) retrieve all the values, localized according to prefLang value
// if not found, fall back to the values of defaultLang
var localizedText = availableTexts[prefLang] || availableTexts[defaultLang];


// step 4) in all your code, you just have to use the variable localizedText
// now you don't care what the user language is,
// and you keep your code so dead simple by the way !
$.getScript("/js/bannerText.js", function(){
    console.log(localizedText.Main); // "Main Text English"
});
Sign up to request clarification or add additional context in comments.

1 Comment

@CarlYoungman No problem :) I've updated my answer to really answer to your question in the first place, then only propose an alternative for internationalization, you can have a look if you want :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.