Super simple JS language changer

If you used Google to find out how to change your website's language with JavaScript, you would have most likely came across Ben Frain's post.

It's not a bad solution, but if you've just started your coding journey (or if you just want a quick fix), it might be too complex to understand - which is why I have come up with a simpler solution.

My solution is much simpler to implement and understand, but it comes with some very specific caveats:
  1. WILL NOT WORK IF JAVASCRIPT IS DISABLED
  2. This is not a translator
  3. You must have a translated version of your text beforehand
  4. Recommended for short to medium length text - as the amount of text and/or languages increases, the amount of code will also significantly increase.
There is no real time translation going on - all we are doing is simply changing the on-screen text via JavaScript with the innerHTML property. This is very simple to implement, but as I've mentioned above, this method can get extremely tedious if you have a lot of text and/or languages.

In the CodePen example below, I use a table for formatting reasons, but the main thing to remember is to have a span tag with a unique ID:

See the Pen Simple JS language changer by hohkfuyuhi (@hohkfuyuhi) on CodePen.

Max Ho