title: Using Javascript to change website language
body: <p>I'm working on a GUI website that can use several languages. The original HTML-files I got to work with were totally static. So if translation was needed I had to parse through alle files, note where some words or terms were, collect them all hand them to the translation department and enter those translations in the new language files. </p>
  
  <p>Since those files were totally static it meant having to translate whole sections several times. Not very effictient.</p>
  
  <p>So now I am working on some kind of dictionary in Javascript, to just exchange the terms in those websites. Mostly it works this way:</p>
  
  <pre><code>var dicEnglish = {
  term 1: "This is the English text"
  Ref: "Another English text"
  }
  var dicFrench = {
  term 1: "This is the French text"
  Ref: "Another French text"   
  }
  </code></pre>
  
  <p>Which contains all the possible content that needs to be changed. Every candidate in the HTML-code gets a <code>class="dicRef" id="l_dicTag_#"</code>as identifier, which I slice down to the dictionary tag and exchange with the following code:</p>
  
  <pre><code>var imgSrc = "en";
  var ActiveDic;
  var langSel;
  if(window.name){
      langSel=window.name;
      }
  else{langSel="English";
  }
  
  function LangChange(){
  langClass = document.getElementsByClassName("dicRef");
  var i = langClass.length;
  var Start, Stop, idSrc, idDic;
  var navText;
  
  switch(langSel){
      case "French":
          langSel="French";
          imgSrc = "en";
          navText="Anglais";
          break;
      case "English":
      case "Anglais":
      default:
          langSel="English";
          imgSrc = "fr";
          navText="French";
          break;
      }
  ActiveDic="dic"+langSel;
  window.name=langSel;
  
  while(i--){
      idSrc = langClass[i].id;
      Start=idSrc.indexOf("_")+1;
      Stop=idSrc.lastIndexOf("_");
      idDic=idSrc.slice(Start,Stop);
      if(window[ActiveDic][idDic]){
          document.getElementById(idSrc).innerHTML=window[ActiveDic][idDic];}
      else{
          document.getElementById(idSrc).innerHTML="N/A";
      }
  }
  if(document.getElementById("imgSel")){
      document.getElementById("imgSel").src="../../img/"+imgSrc+".gif";
  }
  if (document.getElementById("l_SelLang1_1")){
      document.getElementById("l_SelLang1_1").innerHTML=navText;
  }
  }
  </code></pre>
  
  <p>The problem lies in the uniqueness of the id-tag. Since some terms can occur more than once and some are generated the counter is needed. I'd prefer to ommit the counter, but can't find any other identifier to sort out all target terms and change their content.</p>
  
  <p>Since I want to be safe for the future I'd prefer a solution that makes it possible to handle a possible third language. Working with the inner HTML would need to tag the same term several times, once for each language.</p>
  
  <p>So is there any way to target all terms to be exchanged more efficently and easily, or a better way to do it? I can only work with client-side solutions, so no PHP and so on.</p>
  
  <p>Thanks in advance and hopefully this wasn't too long to read.</p>