navigation bar contents lose all styling after translation-CodePudding

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 >
            <a href='#' language='english' >EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div >
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" >
        <div >
            <nav>
                <ul>
                    <li ><a href="/">About Us</a></li>
                    <li ><a href="news">News</a></li>
                    <li ><a href="results">Results</a></li>
                    <li ><a href="leagues">Leagues</a></li>
                    <li ><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 > News</h1>
    <p >Last weekend there were a lot of great games.
    </p>
</div>

CodePudding user response：

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 >
            <a href='#' language='english' >EN</a>
            <a href='#' language='latvian'>LV</a>
</div>
<div >
    <header id="up">
        <img src="/img/logo.png" alt="QuickSportScoresLogo" >
        <div >
            <nav>
                <ul>
                    <li ><a href="/">About Us</a></li>
                    <li ><a href="news">News</a></li>
                    <li ><a href="results">Results</a></li>
                    <li ><a href="leagues">Leagues</a></li>
                    <li ><a href="login">Profile</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <h1 > News</h1>
    <p >Last weekend there were a lot of great games.
    </p>
</div>