+ 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
12 Answers
+ 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
+ 4
I think this may help.
https://code.sololearn.com/WghmYif2CyOe/?ref=app
+ 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 >>
+ 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
+ 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?
+ 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
+ 3
I just done it, while you're posting here ;)
+ 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.
+ 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 ^^)
+ 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
+ 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 ^^)
+ 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."
}
}
?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Javascript
0 Votes
What's wrong with this code
2 Votes
Help
1 Votes
Help me Debug!!!
1 Votes
Raspberry Pi 5 Server
2 Votes
strings and variables
0 Votes
video html
0 Votes