Javascript: Show/hide elements based on their class

Question

I am including bilingual functionality on a website I am building. Researching the options I've gone for using the show/hide approach as I understand this is better for SEO, compared to switching out strings. I would also like to stick to javascript for now as I am still learning. I've gone over several posts here in StackOverflow, but have not found a solution so far.

The below approach works with a simple test file I have created, but once I try to implement it on the website it shows both languages in onload as well as when clicking the button. I'm working just with the Menu and a header of the page for now – maybe there is something I need to with these more specific elements?

My Html

(…)
<ul id="navlinks">
   <li><a href="index.html">Home</a></li>
   <li class="lang-de"><a href="angebot.html">Angebot</a></li>
   <li class="lang-eng"><a href="angebot.html" class="thispage">Services</a></li>
   <li class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></li>
   <li class="lang-eng"><a href="wer_wir_sind.html">About Us</a></li>
   <li class="thispage lang-de"><a href="beispiele.html">Beispiele</a></li>
   <li class="thispage lang-eng"><a href="beispiele.html">Beispiele</a></li>
   <li class="lang-de"><a href="rezensionen.html">Rezensionen</a></li>
   <li class="lang-eng"><a href="rezensionen.html">Reviews</a></li>
   <li class="lang-de"><a href="contact.php">Kontakt</a></li>
   <li class="lang-eng"><a href="contact.php">Contact</a></li>
</ul>
(…)
<input type="button" value="Display Page in English" id="translate">
(…)
<script type="text/javascript" src="js/translate.js"></script>

My Javascript

var trans_button = document.getElementById("translate");
        var de = document.querySelectorAll(".lang-de"); //get all German text blocks
        var eng = document.querySelectorAll(".lang-eng"); // get all English text blocks
        var aufDeutsch = true;

//figure out which language should be visible
function translate() {
    if (aufDeutsch) {
        de.forEach(showObject);
        eng.forEach(hideObject);
        trans_button.textContent = "Display Page in English";
        aufDeutsch = false;
    } else {
        de.forEach(hideObject);
        eng.forEach(showObject);
        trans_button.textContent = "Diese Seite auf Deutsch zeigen";//SOLUTION: Change *TextContent* to *value*
        aufDeutsch = true;
    }
    console.log(de.length, eng.length, aufDeutsch);
    
}
        //hide the object
        function hideObject(item) {
            if(item.classList.contains('lang-active')) {
                item.classList.remove('lang-active'); 
            
            item.classList.add('lang-inactive');
            }
        }
        
        //shoe the object
        function showObject(item) {
            if(item.classList.contains('lang-inactive')) {
               item.classList.remove('lang-inactive'); 
            }
            item.classList.add('lang-active');
        }
        
        window.onload = translate; //set the correct language as the page loads
        trans_button.addEventListener("click", translate, false); //click listener to make the changes

My CSS

(…)
lang-active {
    display: block;
}
lang-inactive {
    display: none;
}
(…)

I have debugged through my browser (Safari). Javascript is collecting the array for each language correctly and exchanging the active/inactive class as well. I feel like I am overlooking something obvious, but I'm just not seeing it. I've already tried to use display: inherit for the lang-active class. Also, the text in the button does not change when clicking. As mentioned when I do this with a test-file (using paragraphs <p>) it all works.

//ETA: solved button text issue: I needed to change its value not its textContent.

Answer 1

This can be VASTLY simplified

let de,en, aufDeutsch = true;
const translate = function(e) {
  de.forEach(item => item.classList.toggle("lang-inactive", !aufDeutsch));
  en.forEach(item => item.classList.toggle("lang-inactive", aufDeutsch));
  e.target.textContent = aufDeutsch ? "Display Page in English" : "Diese Seite auf Deutsch zeigen";
  aufDeutsch = !aufDeutsch;
};
window.addEventListener("load", function() {
  de = [...document.querySelectorAll(".lang-de")]; //get all German text blocks
  en = [...document.querySelectorAll(".lang-eng")]; // get all English text blocks
  const but = document.getElementById("translate")
  but.addEventListener("click", translate)
  but.click()
})

.lang-inactive {
  display: none;
}

li { display: inline-block; }

<ul id="navlinks">
  <li><a href="index.html">Home</a></li>
  <li class="lang-de"><a href="angebot.html">Angebot</a></li>
  <li class="lang-eng"><a href="angebot.html" class="thispage">Services</a></li>
  <li class="lang-de"><a href="wer_wir_sind.html" class="thispage">Über Uns</a></li>
  <li class="lang-eng"><a href="wer_wir_sind.html">About Us</a></li>
  <li class="thispage lang-de"><a href="beispiele.html">Beispiele</a></li>
  <li class="thispage lang-eng"><a href="beispiele.html">Examples</a></li>
  <li class="lang-de"><a href="rezensionen.html">Rezensionen</a></li>
  <li class="lang-eng"><a href="rezensionen.html">Reviews</a></li>
  <li class="lang-de"><a href="contact.php">Kontakt</a></li>
  <li class="lang-eng"><a href="contact.php">Contact</a></li>
</ul>
<button id="translate">Translate</button>