JSFiddle - React, Tailwind, and code Playground
by userTrue
HTML
<div>
<input name="lang" type="radio" value="en" checked onchange="translate(value)">En
<input name="lang" type="radio" value="ru" onchange="translate(value)">Ru
</div>
<select id="month" translate>
<option value="january">January</option>
<option value="february">February</option>
<option value="may">May</option>
</select>
JavaScript
document.addEventListener('DOMContentLoaded', main);
function main() {
const lang = document.querySelector('[name="lang"]').value;
translate(lang);
}
function translate(lang) {
const currentlangMap = langMap[lang];
if (!currentlangMap) return;
for (const el of document.querySelectorAll('[translate]>*')) {
const text = el.textContent;
if (text && currentlangMap[text]) {
el.textContent = currentlangMap[text];
}
}
}
const langMap = {
ru: {
January: 'Январь',
February: 'Ферваль',
May: 'Май'
},
en: {
Январь: 'January',
Ферваль: 'February',
Май: 'May'
}
}