Как при смене языка поменять href

Всем привет! На лендинге реализовано смена языка через json на JS

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

  <div class="header-lang-wrapper">
                <div class="header-lang-en">
                    <input type="radio" class="header__lang" id="lang_en" name="lang" data-value="en" onchange="changeLang('en');" />
                    <label for="lang_en" class="header__lang-wrapper header__lang-wrapper-en">en</label>
                </div>
                <div class="header-lang-ru">
                    <input type="radio" class="header__lang" id="lang_ru" name="lang" data-value="ru" onchange="changeLang('ru');" />
                    <label for="lang_ru" class="header__lang-wrapper header__lang-wrapper-ru">ru</label>
                </div>
</div>

Сама линка

<a class="contacts__telegram link-telegram">
    <span class="langchange" data-key="contacts-telegram">Наше комьюнити в Телеграм</span>
</a>

JS

const langJSON = {
  "en" : {
    "contacts-telegram" : "Nutra Affiliate Community",
  },

  "ru" : {
    "contacts-telegram" : "Наше комьюнити в Телеграм",
  }
}


document.addEventListener("DOMContentLoaded", function(event) {
  var appLang = localStorage.getItem('lang');

  // if no language value saved in local-storage, set en as default
  if(appLang === null){
    localStorage.setItem('lang', 'en'); // updaet local-storage

    // fun contentUpdate function with en value
    contentUpdate('en'); 

    // select radiobutton which has data-value = en
    document.querySelector('[data-value="en"]').checked = true;

  } else {
    // fun contentUpdate function with value from local-storage - en, ru..
    contentUpdate(appLang); 
  
    // select radiobutton which has data-value == local storage value
    document.querySelector('[data-value="'+appLang+'"]').checked = true;
   
  }
});
const langWrapper = document.querySelector('.header-lang-wrapper');
const langTrigger = document.querySelectorAll('.header__lang-wrapper');

langTrigger.forEach(lang => {
  lang.addEventListener('click', () => {
    langWrapper.classList.toggle('change');
  })
})

// change innerhtml on radiobtn click
function changeLang(langVal){
  // set local-storage lang value from value given in onchange="changeLang(value)"
  localStorage.setItem('lang', langVal);

  // fun contentUpdate function with value from onchange="changeLang(value)"
  contentUpdate(langVal);
}


// content/innerhtml update/assign
function contentUpdate(cl){
  // get current langage contents in array
  var currLang = Object.entries(langJSON)[Object.keys(langJSON).indexOf(cl)][1],
      // get current language content array length
      langCont = Object.entries(currLang).length;
    for(let i = 0; i < langCont; i++) {
    // get selectors which has .langchange classes
    var getSelector = document.querySelectorAll('.langchange')[i],
        // get data-key attribute from .langchange class selectors
        getAttr = getSelector.getAttribute('data-key')

    // assign the data-key value from current language array to the .langchange[data-key] selector
    getSelector.innerHTML = currLang[getAttr];
  }
}

Проблема в том что href должен меняться при смене языка, как это реализовать?


Ответы (0 шт):