Переключатель языка JS

Рейтинг: 0Ответов: 1Опубликовано: 22.03.2023

У меня супертупой вопрос: пытаюсь сделать переключатель языка на JS. Существует некоторое количество блоков, внутри тексты. Для каждой фразы есть свой перевод в объекте LanguageDataArr. И я хочу чтобы при изменение языка в select изменялся язык всей страницы (пока не обращаем внимания на title, hash etc.) Чтобы реализовать это дал всем элементам специальный класс "lng-" но при обращении таким образом получается либо null (querySelector) либо пустая коллекция(getElementsByClassName), хотя на видео https://www.youtube.com/watch?v=MKx31x5u_SQ у него это срабатывает. Подскажите что не так делаю?

const LanguageDataArr = {
  "one" : {
    "en" : "one",
    "ru" : "один",
  },
  "two" : {
    "en" : "two",
    "ru" : "два",
  },
  "three" : {
    "en" : "three",
    "ru" : "три",
  },
};


const langSwitcher = document.getElementById("langSwitcher");
langSwitcher.addEventListener("change", changeLanguage);


function changeLanguage() {
  let currentLang = langSwitcher.value;


  for (let key in LanguageDataArr){
    document.querySelector("lng-" + key).innerHTML = LanguageDataArr[key][currentLang];
  }
}
<div class="block1">
  <p class="textOne lng-one">one</p>
</div>
<div class="block2">
  <p class="textTwo lng-two">two</p>
</div>
<div class="block3">
  <p class="textThree lng-three">three</p>
</div>
<select name="langSwitcher" id="langSwitcher">
  <option value="en">en</option>
  <option value="ru">ru</option>
</select>

javascript смена-языка
Источник: Stack Overflow на русском

Ответы

▲ 0

Основная проблема в неверном селекторе. Для поиска по классу в функцию .querySelector нужно передавать строку начинающуюся с точки.

const LanguageDataArr = {
  "one": {
    "en": "one",
    "ru": "один",
  },
  "two": {
    "en": "two",
    "ru": "два",
  },
  "three": {
    "en": "three",
    "ru": "три",
  },
};


const langSwitcher = document.getElementById("langSwitcher");
langSwitcher.addEventListener("change", changeLanguage);


function changeLanguage() {
  let currentLang = langSwitcher.value;


  for (let key in LanguageDataArr) {
    document.querySelector(".lng-" + key).innerHTML = LanguageDataArr[key][currentLang];
  }
}
<div class="block1">
  <p class="textOne lng-one">one</p>
</div>
<div class="block2">
  <p class="textTwo lng-two">two</p>
</div>
<div class="block3">
  <p class="textThree lng-three">three</p>
</div>
<select name="langSwitcher" id="langSwitcher">
  <option value="en">en</option>
  <option value="ru">ru</option>
</select>

Для использования .getElementsByClassName лучше хранить ключ локализации в отдельном атрибуте. В этом случае можно будет идти по всем элементам нуждающимся в локализации и обновлять значения.

Стоит обратить внимание, что в .getElementsByClassName имя класса передается без точки.

const LanguageDataArr = {
  "one": {
    "en": "one",
    "ru": "один",
  },
  "two": {
    "en": "two",
    "ru": "два",
  },
  "three": {
    "en": "three",
    "ru": "три",
  },
};


const langSwitcher = document.getElementById("langSwitcher");
langSwitcher.addEventListener("change", changeLanguage);
var elements = document.getElementsByClassName("lng");

function changeLanguage() {
  let currentLang = langSwitcher.value;

  
  for (let el of elements) {
    el.innerHTML = LanguageDataArr[el.dataset.key][currentLang];
  }
}
<div class="block1">
  <p class="textOne lng" data-key="one">one</p>
</div>
<div class="block2">
  <p class="textTwo lng" data-key="two">two</p>
</div>
<div class="block3">
  <p class="textThree lng" data-key="three">three</p>
</div>
<select name="langSwitcher" id="langSwitcher">
  <option value="en">en</option>
  <option value="ru">ru</option>
</select>