Untitled

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div>
      <h1 data-i18n='title'>Company b2b website</h1>
      <p data-i18n='text'>The most accessible of Tokyo's Izu Islands, Hachijojima is a short, direct flight from Haneda Airport, making it the quickest and easiest subtropical retreat from the city. Escape the concrete jungle for the beautiful nature and unique culture of this off-the-beaten-track destination.</p>

      <input data-i18n-placeholder='input-placeholder' type="text" placeholder="Enter username" />
      <input data-i18n='input-button' type="button" value="Button" />

      <div data-i18n-show='en'>
        <hr>
        Show in En
      </div>

      <div data-i18n-show='ja'>
        <hr>
        Show in Ja
      </div>
      <hr>

      <span data-i18n='choose-language'>Choose language:</span>
      <select data-i18n-select>
        <option value="en">EN</option>
        <option value="ko">KO</option>
        <option value="ja">JA</option>
      </select>
    </div>

    <script>
      var texts = {
        en: {
          title: 'Company B2B website',
          text: "The most accessible of Tokyo's Izu Islands, Hachijojima is a short, direct " +
          "flight from Haneda Airport, making it the quickest and easiest subtropical retreat " +
          "from the city. Escape the concrete jungle for the beautiful nature and unique culture of this off-the-beaten-track destination.",
          'choose-language': 'Choose language:',
          'input-placeholder': 'Enter username',
          'input-button': 'Button',
        },
        ko: {
          title: 'Company B2B 웹 사이트',
          text: "도쿄에서 비행기로 단 1시간이면 도착하는 아열대 화산섬",
          'choose-language': '언어 선택:',
          'input-placeholder': '사용자 이름을 입력하십시오',
          'input-button': '단추',
        },
        ja: {
          title: 'Company B2B ウェブサイト',
          text: "東京の伊豆諸島で最もアクセスが良い八丈島は、羽田空港からの短時間の直行便で行くことができる、亜熱帯のリゾートです。コンクリートジャングルを脱出し、八丈島の美しい自然とユニークな文化を体験しましょう。",
          'choose-language': '言語を選択:',
          'input-placeholder': 'ユーザー名',
          'input-button': 'ボタン',
        }
      }

      // --------------------------

      function translatePage(language) {
        translateTexts(language);
        translatePlaceholders(language);
        showLanguageSpecificElements(language);
      }

      function translateTexts(language) {
        var i18n = texts[language] || texts['en'];

        var i18nEls = document.querySelectorAll('[data-i18n]');
        for (var i = 0; i < i18nEls.length; i++) {
          var i18nEl = i18nEls[i];
          var i18nKey = i18nEl.getAttribute('data-i18n');
          var propToChange = i18nEl.value ? 'value' : 'innerHTML';
          i18nEl[propToChange] = i18n[i18nKey];
        }
      }

      function translatePlaceholders(language) {
        var i18n = texts[language] || texts['en'];

        var i18nEls = document.querySelectorAll('[data-i18n-placeholder]');
        for (var i = 0; i < i18nEls.length; i++) {
          var i18nEl = i18nEls[i];
          var i18nKey = i18nEl.getAttribute('data-i18n-placeholder');
          i18nEl.placeholder = i18n[i18nKey] || '';
        }
      }

      function showLanguageSpecificElements(language) {
        var i18nEls = document.querySelectorAll('[data-i18n-show]');
        for (var i = 0; i < i18nEls.length; i++) {
          var i18nEl = i18nEls[i];
          var i18nLangVisibility = i18nEl.getAttribute('data-i18n-show');
          i18nEl.style.display = i18nLangVisibility === language ? 'inherit' : 'none';
        }
      }

      function getLanguage() {
        return readLanguageFromCookie() ||
               (navigator.language || 'ja').split('-')[0];
      }

      function changeLanguage(language) {
        storeLanguageInCookie(language);
        translatePage(language);
      }

      function readLanguageFromCookie() {
        return (document.cookie.match('(^|[^;]+)\\s*' + 'language' + '\\s*=\\s*([^;]+)') || []).pop();
      }

      function storeLanguageInCookie(language) {
        document.cookie = "language=" + language;
      }

      function init() {
        var language = getLanguage();
        var selectEl = document.querySelector('[data-i18n-select]');

        selectEl.addEventListener('change', function(e) { changeLanguage(e.target.value); })
        selectEl.value = language;
        translatePage(language);
      }

      init();
    </script>
  </body>
</html>