i18next

by harsh dand

HTML

<script src="https://unpkg.com/[email protected]/dist/umd/i18next.min.js"></script>
<h1 id="greeting"></h1>
<p id="farewell"></p>

<select id="language-switcher">
  <option value="en">English</option>
  <option value="es">Español</option>
</select>

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    i18next.init({
      lng: 'en', // default language
      resources: {
        en: {
          translation: {
            "greeting": "Hello",
            "farewell": "Goodbye"
          }
        },
        es: {
          translation: {
            "greeting": "Hola",
            "farewell": "Adiós"
          }
        }
      }
    }, (err, t) => {
      if (err) return console.error(err);

      updateContent();
    });

    function updateContent() {
      document.getElementById('greeting').innerHTML = i18next.t('greeting');
      document.getElementById('farewell').innerHTML = i18next.t('farewell');
    }

    document.getElementById('language-switcher').addEventListener('change', (event) => {
      i18next.changeLanguage(event.target.value, updateContent);
    });
  });