navigation bar contents lose all styling after translation

Question

I have ran into a problem, I have managed to translate nav bar. Right now, I have managed to translate all the content of the page but I have a problem which I cannot figure out myself. The problem: When I switch the language of the page from "English" to "Latvian" all <a hrefs> leading to other pages and css styling disappears. After the translation the latvian version becomes a plain text in the navbar, but it stays the same in heading and paragraph. Can anyone help me solve the problem?

 const langEl = document.querySelector('.langWrap'); const link = document.querySelectorAll('a'); const titleEl = document.querySelector('.headings'); const descrEl = document.querySelector('.description'); const aboutUsEl = document.querySelector('.aboutus'); const newsEl = document.querySelector('.news'); const resultsEl = document.querySelector('.results'); const leaguesEl = document.querySelector('.leagues'); const loginEl = document.querySelector('.login'); link.forEach(el => { el.addEventListener('click', () => { langEl.querySelector('.active').classList.remove('active'); el.classList.add('active'); const attr = el.getAttribute('language'); titleEl.textContent = data[attr].headings; descrEl.textContent = data[attr].description; aboutUsEl.textContent = data[attr].aboutus; newsEl.textContent = data[attr].news; resultsEl.textContent = data[attr].results; leaguesEl.textContent = data[attr].leagues; loginEl.textContent = data[attr].login; }); }); var data = { "english": { "aboutus":"About Us", "news":"News", "results":"Results", "leagues":"Leagues", "login":"Profile", "headings": "News", "description": "Last weekend there were a lot of great games." }, "latvian": { "Aboutus":"Par mums", "news":"Jaunumi", "results":"Rezultāti", "leagues":"līgas", "login":"profils", "headings": "Jaunumi", "description": "Pagājušajā nedēļā bija ļoti daudz labu spēļu" } }

 <div class="langWrap"> <a href='#' language='english' class="active">EN</a> <a href='#' language='latvian'>LV</a> </div> <div class="content"> <header id="up"> <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo"> <div class="container"> <nav> <ul> <li class="aboutus"><a href="/">About Us</a></li> <li class="news"><a href="news">News</a></li> <li class="results"><a href="results">Results</a></li> <li class="leagues"><a href="leagues">Leagues</a></li> <li class="login"><a href="login">Profile</a></li> </ul> </nav> </div> </header> <h1 class="headings"> News</h1> <p class="description">Last weekend there were a lot of great games. </p> </div>

Answer 1

here's just change selector to a tag

 const langEl = document.querySelector('.langWrap'); const link = document.querySelectorAll('a'); const titleEl = document.querySelector('.headings'); const descrEl = document.querySelector('.description'); const aboutUsEl = document.querySelector('.aboutus a'); const newsEl = document.querySelector('.news a'); const resultsEl = document.querySelector('.results a'); const leaguesEl = document.querySelector('.leagues a'); const loginEl = document.querySelector('.login a'); link.forEach(el => { el.addEventListener('click', () => { langEl.querySelector('.active').classList.remove('active'); el.classList.add('active'); const attr = el.getAttribute('language'); titleEl.textContent = data[attr].headings; descrEl.textContent = data[attr].description; aboutUsEl.textContent = data[attr].aboutus; newsEl.textContent = data[attr].news; resultsEl.textContent = data[attr].results; leaguesEl.textContent = data[attr].leagues; loginEl.textContent = data[attr].login; }); }); var data = { "english": { "aboutus":"About Us", "news":"News", "results":"Results", "leagues":"Leagues", "login":"Profile", "headings": "News", "description": "Last weekend there were a lot of great games." }, "latvian": { "aboutus":"Par mums", "news":"Jaunumi", "results":"Rezultāti", "leagues":"līgas", "login":"profils", "headings": "Jaunumi", "description": "Pagājušajā nedēļā bija ļoti daudz labu spēļu" } }

 <div class="langWrap"> <a href='#' language='english' class="active">EN</a> <a href='#' language='latvian'>LV</a> </div> <div class="content"> <header id="up"> <img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo"> <div class="container"> <nav> <ul> <li class="aboutus"><a href="/">About Us</a></li> <li class="news"><a href="news">News</a></li> <li class="results"><a href="results">Results</a></li> <li class="leagues"><a href="leagues">Leagues</a></li> <li class="login"><a href="login">Profile</a></li> </ul> </nav> </div> </header> <h1 class="headings"> News</h1> <p class="description">Last weekend there were a lot of great games. </p> </div>