Есть такой незатейливый код для мультиязычности сайта.
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: 'Узнать больше',
},
};
