HTML navigation of tabs broken

Question

I have my portfolio website in English and translated it in to German with a combination of JSON and Javascript. I have a dropdown menu to pick a language, and once a language is picked a javascript script switches the content of every indicated id with the content of the other language.

I also have a navigation menu which gets underlined when you hover over it and when you click it, it takes you to its respective area on the website. However, the moment the user switches the language, both of these functions do not work anymore i.e the href="#header# as well as nav ul li a:hover::after{} break.

You can mimic this behaviour at alexverheecke.com. Before selecting a language, you can hover over "Home", "About" and it will become underlined and upon clicking, will take you to the section. Once you switch language, this breaks.

I'm assuming this will be a bit time-consuming for someone to look at but I would appreciate any ideas that could help in fixing this.

const jsonDE = {
  "_Home": "Startseite",
  // ...
}
document.querySelector('#language').addEventListener("change", function() {
  if (this.value == "🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG") {
    for (let key in jsonEN) {
      document.querySelector('#' + key).textContent = jsonEN[key]
    } 
    
  else if (this.value == "🇩🇪 DE") {
    for (let key in jsonDE) {
      document.querySelector('#' + key).textContent = jsonDE[key]
    }
  }
});

nav {
  display: flex;
  /* so image and links side-by-side */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

nav ul li {
  display: inline-block;
  /*  so horizontally aligned */
  list-style: none;
  margin: 10px 20px;
  /*  space between links */
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  position: relative;
  /* because abolute in :after */
}

nav ul li a::after {
  content: '';
  width: 0%;
  height: 3px;
  background: #3a65ed;
  position: absolute;
  left: 0;
  bottom: -6px;
  transition: 0.2s;
}

nav ul li a:hover::after {
  width: 100%;
}

<nav>
  <ul id="sidemenu">
    <li id="_Home"><a href="#header">Home</a> </li>
    <select id="language" class="language">
      <option>🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
      <option>🇩🇪 DE</option>
    </select>
  </ul>
</nav>

Answer 1

If you check your site with the DOM inspector you can see that after you change language the a elements have been removed from within the li of your navigation bar.

I would assume this is because your JSON content holds HTML, yet you're updating the textContent of the element. Change textContent to innerHTML and try again.

Also note that you can simplify the language switching logic by putting the language code as a property within a single object of the JSON. Then you only need one loop to work with every language. Note the use of a value attribute on the option elements to avoid the need to have to cater for the subscript language codes which have been added to the text within the UI of the option.

Below is a working example with both of the above issues corrected:

// mock JSON object...
const translations = {
  "DE": {
    "_Home": "<a href=\"#header\">Startseite</a>"
  },
  "EN": {
    "_Home": "<a href=\"#header\">Home</a>"
  },
  "IT": {
    "_Home": "<a href=\"#header\">Casa</a>"
  }
}

// content switching logic
document.querySelector('#language').addEventListener("change", function() {
  for (let key in translations[this.value]) {
    document.querySelector('#' + key).innerHTML = translations[this.value][key]
  }
});

nav {
  display: flex;
  /* so image and links side-by-side */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

nav ul li {
  display: inline-block;
  /*  so horizontally aligned */
  list-style: none;
  margin: 10px 20px;
  /*  space between links */
}

nav ul li a {
  /* color: white; removed so white text is visible */
  text-decoration: none;
  font-size: 18px;
  position: relative;
  /* because abolute in :after */
}

nav ul li a::after {
  content: '';
  width: 0%;
  height: 3px;
  background: #3a65ed;
  position: absolute;
  left: 0;
  bottom: -6px;
  transition: 0.2s;
}

nav ul li a:hover::after {
  width: 100%;
}

<nav>
  <ul id="sidemenu">
    <li id="_Home"><a href="#header">Home</a> </li>
  </ul>
</nav>

<select id="language" class="language">
  <option value="EN">🏴󠁧󠁢󠁥󠁮󠁧󠁿 ENG</option>
  <option value="DE">🇩🇪 DE</option>
  <option value="IT">ᴵᵀ IT</option>
</select>