Не срабатывает case?

Question

[Alex_87]

Прошу помочь разобраться, почему не срабатывает case. Нет смена изображении

window.onload = readyChange;

function readyChange(){
        const el = document.querySelector('#lang_choice_polylang-10');
        const lang = document.querySelector('.info__language .abs-lang');
     
     
      // element.addEventListener("change", function() {
      
      
        const lg = el.value;
        
        
        console.log(lg);
        switch (lg) {
          case 'ru':
            lang.style.content = 'site/ru-lang.png'
            break;
          case 'en':
            lang.style.content = 'site/en-lang.png'
            break;
          case 'ro':
            lang.style.content = 'site/ro-lang.png'
          
        }
      // });
}

Comments

[alexalexes]

Еще не помешает в отладчике поставить брейкпоинт, и проверить, доходит ли выполнение до этой строчки:
element.addEventListener("change", function() {
Ну, и за одно проверить, цепляет ли нужный элемент этот селектор:

element = document.querySelector('#lang_choice_polylang-10');

[Алексей Уколов]

TheAndrey7, обстоятельства, при которых будет хоть как-то заметна разница в скорости между getElementById и querySelector настолько специфичны, что вероятность встретить их в реальности крайне мала. При этом querySelector гибче и потому удобнее.

[alexalexes]

querySelector-ом можно выцеплять элементы с повторяющимися id, в отличие от getElementById.
Это поможет, если страница сформирована невалидно с точки зрения использования id, но исправить это здесь и сейчас не представляется возможным.

[Alex_87]

Алексей Уколов, посмотрите пожалуйста обновлённый код

window.onload = readyChange;

function readyChange(){
        const el = document.querySelector('#lang_choice_polylang-10');
        const lang = document.querySelector('.info__language .abs-lang');
       
        const lg = el.value;
          
        console.log(lg);
        switch (lg) {
          case 'ru':
            lang.style.content = 'site/ru-lang.png'
            break;
          case 'en':
            lang.style.content = 'site/en-lang.png'
            break;
          case 'ro':
            lang.style.content = 'site/ro-lang.png'
          
        }
     
}

.info__language .abs-lang{
  position:absolute;
  content:url(site/ro-lang.png);
  width:20px;
  height:20px;
  left:-24px;
}

Не происходит обновление свойства content

[xdevelx]

Alex_87, Зачем вообще switch здесь нужен?

function readyChange() {
  const el = document.querySelector('#lang_choice_polylang-10');
  const lang = document.querySelector('.info__language .abs-lang');
  const lg = el.value;

  lang.style.content = `site/${lg}-lang.png`;
}

Да и не мешало бы вам понять, зачем content собственно используется в css.
Если уж через css нужно задавать разные иконки для флагов стран, то для этого нужно заводить классы под разные страны и фоном задавать иконки.

[Alex_87]

xdevelx, так как написано у вас - не сработало.... Буду пробовать через классы, может получиться

Answer 1

[Денис Инешин]

case ru: -> case 'ru':

Comments

[Alex_87]

Исправил! Посмотрите пожалуйста на отредактированный код. Не работает. Нет записи в свойство content

window.onload = readyChange;

function readyChange(){
        const el = document.querySelector('#lang_choice_polylang-10');
        const lang = document.querySelector('.info__language .abs-lang');
     
     
      // element.addEventListener("change", function() {
      
      
        const lg = el.value;
        
        
        console.log(lg);
        switch (lg) {
          case 'ru':
            lang.style.content = 'site/ru-lang.png'
            break;
          case 'en':
            lang.style.content = 'site/en-lang.png'
            break;
          case 'ro':
            lang.style.content = 'site/ro-lang.png'
          
        }
      // });
}

.info__language .abs-lang{
  position:absolute;
  content:url(site/ro-lang.png);
  width:20px;
  height:20px;
  left:-24px;
}

[Sand]

lang.style.content = 'site/ru-lang.png' -> lang.style.content = 'site/ru-lang.png';

[Alex_87]

Sand, а в чём разница в вашем последнем примере?

[Sand]

Alex_87, разница в отсутствии точки с запятой