0

I need to change a text within my web page basing on visitor's browser language.

Here's a draft I'm working on...but the feature relating text change is of course wrong. I typed it just to show you the idea I need to develope.

<script>
var language = navigator.language || navigator.userLanguage;
var english = language.indexOf('en') !== -1;
var french = language.indexOf('fr') !== -1;
var german = language.indexOf('de') !== -1;
</script>

<script>
function JS_TEXT() {
if (english || french || german)
{ display.text (
(english && 'Register') ||
(french && 'Enregistrer') ||
(german && 'Enschrieben') ); }
</script>

<body>
<h5 style="display:inline; font-size:2.5em" onclick="Registration()" onMouseOut="this.style.color='black'" onMouseOver="this.style.cursor='pointer'; this.style.color='#c00555'" style="color:black">&raquo;&raquo;&raquo; [JS_TEXT] &laquo;&laquo;&laquo;</a></h5>
</body>
Francesca Marchini
  • 3
  • 3
  • Don't do it by hand. There are tons of libraries that already do all that job for you and will be much more convinient to use. http://stackoverflow.com/questions/3084675/how-does-internationalization-work-in-javascript – litelite May 12 '17 at 19:50

1 Answers1

0

Do it like this:

var language = window.navigator.userLanguage || window.navigator.language;

switch(language) {
  case 'en-US': {
    document.getElementById('h5').innerHTML = "&raquo;&raquo;&raquo; Register &laquo;&laquo;&laquo;";
    break;
  }
  
  case 'en-FR': {
    document.getElementById('h5').innerHTML = "&raquo;&raquo;&raquo; Enregistrer &laquo;&laquo;&laquo;";
    break;
  }
  
  case 'en-DE': {
    document.getElementById('h5').innerHTML = "&raquo;&raquo;&raquo; Enschrieben &laquo;&laquo;&laquo;";
    break;
  }
  
  default: {
    document.getElementById('h5').innerHTML = "&raquo;&raquo;&raquo; Register &laquo;&laquo;&laquo;";
    break;
  }
}
<body>
<h5 style="display:inline; font-size:2.5em" onclick="Registration()" onMouseOut="this.style.color='black'" onMouseOver="this.style.cursor='pointer'; this.style.color='#c00555'" style="color:black" id="h5"></h5>
</body>
gaganshera
  • 2,629
  • 1
  • 14
  • 21
  • You missed the part... How am I supposed to replace [JS_TEXT] and call the script text? id="h5" isn't enough. style="color:black" id="h5">»»» [JS_TEXT] ««« – Francesca Marchini May 12 '17 at 20:10
  • Snippet provides error code, and I still see [JS_TEXT] text not replaced by own language word :) – Francesca Marchini May 12 '17 at 20:15
  • Not sure why, it's working perfectly at my end. Refresh the page maybe? – gaganshera May 12 '17 at 20:17
  • Honestly I don't know how exactly a snippet work. If I press Run code snippet it shows "Register" button here...but I dunno where am I supposed to get the code to make it work that way... since I still see code containing [JS_TEXT] and it doesnt of course work that way in my site. – Francesca Marchini May 12 '17 at 20:31
  • The `JS_TEXT` portion can be left empty in the html, since in any case, it's getting updated from the javascript code. See the updated code. – gaganshera May 12 '17 at 20:34
  • It doesn't actually work to me. I still don't get why. It stays blank showing no text any way. And the code I'm using is exactly the same you typed here above. – Francesca Marchini May 12 '17 at 21:21
  • Did you add the id="h5" to your h5? Are there any errors in your browser's console? – gaganshera May 12 '17 at 21:28