Hide elements with javascript based on localization

Design help Custom code
1

Hello,

i am working on my localization version of my website. there are menus and divs i want to hide via javascript. So far so good.

As long as my localised page is on the main page, everything works as expected:

Some navigation elements are not shown

As soon as i go deeper in the page, like this:

the javascript is not working anymore although when prompting the result of my query, the output is correct, but the elements are not hidden anymore.

the js code is:

const queryString = window.location.href;

  
	if (queryString.indexOf('ua') != -1) {
 
  
  document.getElementById("neuigkeiten-container").style.display = "none";
  document.getElementById("Bundesland-5").style.display = "none";
  document.getElementById("Bundesland-5-label").style.display = "none";
  document.getElementById("jobs-link").style.display = "none";
  document.getElementById("guetesiegel-link").style.display = "none";
  document.getElementById("neuigkeiten-link").style.display = "none";
  document.getElementById("neuigkeiten-footerlink").style.display = "none";
  document.getElementById("jobs-footerlink").style.display = "none";
  document.getElementById("guetesiegel-footerlink").style.display = "none";
  document.getElementById("Bundesland-6").style.display = "none";
  document.getElementById("Bundesland-6-label").style.display = "none";
  document.getElementById("bio-oil-stellt-vor").style.display = "none";
  
}

I tried it with contains function as well, always same result.
Anyone can help?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

You need to clarify which elements on the page you expect to be hidden in order for us to help you.

From what I can see, the elements you are attempting to hide do not exist on this page. Therefore, getElementById() would return null, triggering the following error in the developer console:

Uncaught TypeError: document.getElementById(...) is null

You cannot change CSS properties on elements that do not exist. If these elements only exist for specific locales, you should first check for the existence of each element. You could create an array with the ID of each element, loop through it and check for the existence of each one in turn:

// This code has not been tested. Use it at your own risk.

const items = [
   'neuigkeiten-container',
   'Bundesland-5',
   'Bundesland-5-label',
   'jobs-link',
   'guetesiegel-link',
   'neuigkeiten-link',
   'neuigkeiten-footerlink',
   'jobs-footerlink',
   'guetesiegel-footerlink',
   'Bundesland-6',
   'Bundesland-6-label',
   'bio-oil-stellt-vor'
];

items.forEach(function (item) {
   const element = document.getElementById(item);
   
   if (element) {
      element.style.display = 'none';
   }
});
3

Hey @Mark5551 ,

This post might be helpful: