Задать вопрос
@Denis_8106
javascript

Как сделать мультиязычный сайт на чистом 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: 'Узнать больше',
	},
};
  • Вопрос задан
  • 2875 просмотров
2 комментария
Подписаться 6 Простой 2 комментария
Решения вопроса 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];
		}
	}
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Создать инет магазин косметики на opencart
22 нояб. 2024, в 15:10
30000 руб./за проект
Разработать индикатор для торговой платформы Metatreder5
22 нояб. 2024, в 15:00
2500 руб./в час
Разработка базы данных на SQL
22 нояб. 2024, в 14:51
10000 руб./за проект
Ещё заказы