+ 5

How to change the language of the page?

How to change the language of the page? I have <select> in HTML file, the language will change when it changes. I'm sure that this task needs JS, but I still do not know how to use it properly. Can you help me, give the code sample or something? Please . Thanks for help, I will use Visph's and Warith's answers! https://code.sololearn.com/WtOMKyG9b45O/?ref=app

html css javascript html5 css3 jquery change language select multilang

16th Mar 2018, 8:09 PM

PAXANDDOS

12 Réponses

+ 4

Your code is incomplete and not valid (even if permissivity of html makes browsers mandatory to display it "as they can" by attempting to guess how to correct it...) : you should at least close the <body> and <html> tag at end of your code ^^ Anyway, your task doesn't necessarly require JS, but that's the less tricky way (other ways are css tips, or server side dynamic reload of page -- or at least part of page, but this need also some JS). The JS user-sided ways require to watch for <select> change, reading the selected value, and depending on wich language is selected, modify the text content (or hide unselected languages, and show the selected one)... For the first part (watching for <select> change), you need to use event listener, for the second one (reading the selected value) you need to use the 'selectedIndex' property of the <select> element: http://www.egtry.com/javascript/form/event/onchange https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events https://developer.mozilla.org/en-US/docs/Web/Events/change https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex

16th Mar 2018, 10:21 PM

visph

+ 4

I think this may help. https://code.sololearn.com/WghmYif2CyOe/?ref=app

16th Mar 2018, 10:36 PM

Warith Vatanaplachaigoon

+ 4

<< give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime >>

16th Mar 2018, 10:39 PM

visph

+ 4

You can copy a text from JS in your Russian language. Then paste in your <p> tags. It will set the default text. https://code.sololearn.com/WghmYif2CyOe/?ref=app

18th Mar 2018, 7:29 AM

Warith Vatanaplachaigoon

+ 3

@visph Thanks, I have forgot about closing tags. And, you mean that I can use PHP? Can you give an example of the code, or you know where I can find it?

17th Mar 2018, 6:18 AM

PAXANDDOS

+ 3

Some links found by a quick google search with keywords "web multi lang php": https://www.google.com/search?q=web+multi+lang+php (you could also search for keyword "internationalization"... and server side is not necessarly limited to php ;)) http://makitweb.com/implement-multi-language-support-to-website-with-php/ https://www.phpclasses.org/package/5075-PHP-Add-multiple-languages-to-a-Web-site-very-easy-.html http://www.bitrepository.com/php-how-to-add-multi-language-support-to-a-website.html https://phppot.com/php/multi-language-support-to-website-using-php/ https://stackoverflow.com/questions/19249159/best-practice-multi-language-website

17th Mar 2018, 6:51 AM

visph

+ 3

I just done it, while you're posting here ;)

17th Mar 2018, 8:57 AM

visph

+ 3

New question: How to reset the value to default? I mean, I have Russian and English languages, when the page loaded, Russian language are shown. Then we can change it to English(Text from JS), and then back to Russian. So I need to write English and Russian texts both (into JS). How to make that at the setted value on 1(Russian), was displayed default HTML text? I hope you'll understand.

18th Mar 2018, 7:12 AM

PAXANDDOS

+ 3

None "social" network account... And I protect my privacy by not publishing email address: to contact me, just hope I would be still active here, and post a comment on one of my code (if possible related to your question, else related to you), with the link to the question that you should post in Q&A (so the help I could give to you will be easier to find and could be useful for other users ^^)

18th Mar 2018, 4:29 PM

visph

+ 2

@Warith I would do it if I did not have too much text (I have a lot of text) So copy-paste all of it.. That's very hard

18th Mar 2018, 7:50 AM

PAXANDDOS

+ 2

You could call your change() function at load time... There's many ways to do it: + insert a <script>change()</script> somewhere in the html AFTER the </select> closing tag defining the language selector element + insert a onload="change()" attribute into the <body> tag ( <body onload="change()"> ) + define the 'onload' event listener for the window object (equivalent to the <body> 'onload' attribute) anywhere in your JS code(s) + define the 'DOMContentLoaded' for the document object (fired more or less sooner then the onload event) anywhere in your JS codes(s) To define event listener in JS, some could be setted directly as attribute/property, others require use of addEventListener() method (wich will work for all available events -- some older versions of browser could not support it, but globally that's widely supported today, appart for IE before version 9 wich use attachEvent() method instead -- events attributes as "onload", "onclick", are refered without the "on" prefix at attribute of the register method): https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener Best practice would be to use addEventListener() (eventualy with test/switch to support IE<9), and since you doesn't have to wait for all linked file to the page available for the function execution (images, css, js...) to be loaded, use of 'DOMContentLoaded' should be the less or more most efficient way: document.addEventListener('DOMContentLoaded',change); (obviously, the JS part containing the change() definition must have been previously parsed ^^)

18th Mar 2018, 8:59 AM

visph

+ 2

I'm still not good understanding... Did you mean something like: document.addEventListener('DOMContentLoaded',init); var default; function init() { default = document.getElementById("con").innerHTML; } function change() { var i = document.getElementById("lan").value; if (i==1) { document.getElementById("con").innerHTML=default; } else if (i==2) { document.getElementById("con").innerHTML="English Language." } } ?

18th Mar 2018, 11:46 AM

visph