Language Buttons: how to change a current language to another one with HTML and CSS-CodePudding

Please tell me how to change HTML elements when you switch languages (e.g. when you push a button "Japanese", Japanese texts appear, and English texts disappear).

Currently, HTML hides English texts, but I have no idea to switch languages.

body {
  margin: 0;
}

.blk {
  background-color: aqua;
}

.jp_head {
  float: left;
}

h1 {
  font-size: 36px;
}

.btns {
  float: right;
}

.btns a {
  text-decoration: none;
  background-color: lightyellow;
  border: 1.5px solid;
  border-color: black;
  padding: 4px;
}

nav {
  clear: both;
}

nav>ul {
  padding-left: 0;
}

nav>ul>li {
  list-style: none;
}

.menu {
  background-color: blue;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.links li {
  display: inline;
}

.links li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  padding: 1em;
}

details {
  clear: both;
  margin: 12px;
}

ul.toc {
  background-color: lightgray;
  width: 100px;
  height: auto;
}

.clms {
  display: flex;
  height: auto;
}

.clm_1 {
  background-color: lightyellow;
  flex: 2;
  margin-right: auto;
  border: 0.5px solid gray;
}

.clm_2 {
  flex: 1;
  background-color: lightgreen;
  margin-left: auto;
}

.comment {
  clear: both;
}

footer {
  margin-top: 50px;
}


/* 言語切り替え / / Japanese ON, English OFF */

*:lang(en) {
  display: none;
}

<body>
  <div >
    <div >
      <h1 lang="ja">リモートボックス</h1>
      <h1 lang="en">Remote Box</h1>
    </div>
    <div >
      <a href="./works.html">日本語</a>
      <a href="./works.html">英語</a>
    </div>
  </div>
  <nav >
    <ul>
      <li lang="ja">
        <a href="./index.html">ホーム</a><span>></span><a href="./works.html">作品集</a>
      </li>
      <li lang="en">
        <a href="./index.html">HOME</a><span>></span><a href="./works.html">Works</a>
      </li>
    </ul>
  </nav>
  <div >
    <div >
      <li lang="ja">
        <a href="./index.html">
            ホーム</a>
      </li>
      <li lang="ja">
        <a href="./works.html">
            作品集</a>
      </li>
      <li lang="ja">
        <a href="./skills.html">
            スキル</a>
      </li>
      <li lang="ja">
        <a href="./contact.html">
            お問い合わせ</a>
      </li>
    </div>
  </div>
  <div>
    <details>
      <summary>コンテンツ</summary>
      <ul >
        <li><a href="#clm_ja">Python</a>
        </li>
        <li><a href="#clm_ja">JavaScript</a>
        </li>
        <li><a href="#clm_ja">UiPath</a>
        </li>
      </ul>
    </details>
  </div>
  <main>
    <div >
      <div  id="clm_ja_py" lang="ja">
        Python <br> Pythonに関しては、以下のスクリプトを作成したことがあります。
        <ul>
          <li>
            <p>
              Webスクレイピング: 特定のサイトより指定した記事を取得しCSVに出力
            </p>
          </li>
          <li>
            <p>
              英単語帳GUI: Tkinterを使用したフラッシュ単語帳
            </p>
          </li>
          <li>
            <p>
              PowerPoint自動生成プログラム: pptx資料を自動出力します
            </p>
          </li>
        </ul>
      </div>
      <div  id="clm_en_py" lang="en">
        Python <br> I have written these scripts below.
        <ul>
          <li>
            <p>
              Webscrape: access to a web page and output its specific texts into a csv file
            </p>
          </li>
          <li>
            <p>
              Vocabulary GUI: you can see a pair of English words and translations, which appear one after another on the GUI.
            </p>
          </li>
          <li>
            <p>
              RPA for PowerPoint: output pptx files as used for daily reports
            </p>
          </li>
        </ul>
      </div>
      <div  lang="ja">
        最近の読書 <br>
        <p><a href="#">こちら</a>よりご覧ください</p>
      </div>
      <div  lang="ja">
        Recent Reading <br>
        <p>See <a href="#">Here</a></p>
      </div>
    </div>
  </main>
  <div >
    <p lang="ja">ご興味が下記にあれば連絡ください。<br> "メールアドレス"
    </p>
    <p lang="en">Feel free to e-mail me if you are interested<br> "mail adress to be written"
    </p>
  </div>
  <footer>
    <div lang="ja">
      <a  href="./index.html">ホーム
        </a>
      <span>></span>
      <a  href="./works.html">作品集
        </a>
    </div>
    <div lang="en">
      <a  href="./index.html">HOME
        </a>
      <span>></span>
      <a  href="./works.html">Works
        </a>
    </div>
  </footer>
</body>

CodePudding user response：

If you want to translate limited number of languages, then you can create separate div's containing content in that particular language (div 1 in english, div 2 in japanese and so on). Then with the help of event listeners you can show that particular div and hide others.

In case you want to translate it more languages, then you can use google translate api.

It follows like this. Add a div with a particular id.

<div id="google_translate_element"></div>

API reference

    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Script to execute it

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

Adding these 3-code block will give you a drop down, containing languages you can choose from.

CodePudding user response：

This is a dirty approach. Every time you want to change the HTML structure, you would need to manually change every language. Abstract your code instead.

TL;DR; you would need to implement a Javascript code that detects when you change the language (an Event), and change the text accordingly. Instead of doing:

<button>Some text in japanese</button>

You do:

<button id="hello"></button>
<script>
const languages = {
  "en": {
    "hello": "Hello!",
  }
  "jp": {
    "hello: "こんにちは",
  }
}
function changeLanguage(language) {
  for (const keyword in language) {
    const element = document.getElementById(keyword);
    const language = languages[language];
    element.text = language[keyword];
  }
}

changeLanguage("jp");
setTimeout(() => changeLanguage("en"), 3000)
</script>

P.D: Implementing this in just 1 file will be messy, so I recommend splitting in many files. Good luck!