Как сделать мультиязычный сайт на чистом JS?

Есть такой незатейливый код для мультиязычности сайта.
html
<body>
  <div class="lang df">
    <a href="#en" id="lang-en">EN</a>
    <a href="#ru" id="lang-ru">RU</a>
  </div>

  <div class="title">
    <h1 class="lng-h1">Text</h1>
    <button class="btn lng-btn">
      Learn more
    </button>
  </div>

  <script src="app.js"></script>
</body>

css
.df {
  display: flex;
  justify-content: space-between;
  width: 60px;
}

js
const langArr = {
	en: {
		h1: 'Text',
		btn: 'Learn more',
	},

	ru: {
		h1: 'Teкст',
		btn: 'Узнать больше',
	},
};

const langEn = document.querySelector('#lang-en');
const langRu = document.querySelector('#lang-ru');

langEn.addEventListener('click', setLang.bind(null, 'en'));
langRu.addEventListener('click', setLang.bind(null, 'ru'));

function setLang(lang) {
	if (!langArr.hasOwnProperty(lang)) return;
	if (window.hasOwnProperty('localStorage'))
		window.localStorage.setItem('lang', lang);
	for (let key in langArr[lang]) {
		let elem = document.querySelector('.lng-' + key);
		if (elem) {
			elem.innerHTML = langArr[lang][key];
		}
	}
}
let lang = window.hasOwnProperty('localStorage') || 'en';
setLang(lang);


Теперь нехитрый вопрос - Как переделать JS код при другой компоновке const langArr?

const langArr = {
	h1: {
		en: 'Text',
		ru: 'Teкст',
	},

	btn: {
		en: 'Learn more',
		ru: 'Узнать больше',
	},
};
  • Вопрос задан
  • 504 просмотра
Решения вопроса 1
@Denis_8106 Автор вопроса
Нашел такое решение:
html
<body>
  <div class="lang df">
    <button value="en" class="active" id="lang-en">EN</button>
    <button value="ru" id="lang-ru">RU</button>
  </div>

  <div class="title">
    <h1 class="lng-h1">Text</h1>
    <button class="btn lng-btn">Learn more</button>
  </div>

  <script src="app.js"></script>
</body>

js
const langArr = {
	h1: {
		en: 'Text',
		ru: 'Teкст',
	},

	btn: {
		en: 'Learn more',
		ru: 'Узнать больше',
	},
};

document
	.querySelectorAll('.lang button')
	.forEach((b) => b.addEventListener('click', setLang));

function setLang() {
	for (let key in langArr) {
		let elem = document.querySelector('.lng-' + key);
		if (elem) {
			elem.innerHTML = langArr[key][this.value];
		}
	}
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы