Javascript blank page on web

Question

I wanted to make my webpage a multi language page so I used the following js code:

let langs = ['en', 'it', 'sp', 'sv', 'de', 'pt', 'nl'];
let lang = 'en';
setLangStyles(lang);

function setStyles(styles) {
  var elementId = '__lang_styles';
  var element = document.getElementById(elementId);
  if (element) {
    element.remove();
  }

  let style = document.createElement('style');
  style.id = elementId;
  style.type = 'text/css';

  if (style.styleSheet) {
    style.styleSheet.cssText = styles;
  } else {
    style.appendChild(document.createTextNode(styles));
  }
  document.getElementsByTagName('head')[0].appendChild(style);
}

function setLang(lang) {
  setLangStyles(lang);
}

function setLangStyles(lang) {
  let styles = langs
    .filter(function (l) {
      return l != lang;
    })
    .map(function (l) {
      return ':lang('+ l +') { display: none; }';
    })
    .join(' ');

  setStyles(styles);
}

I named it "lang.js" and I tagged it on my html this way:

<!-- jquery -->
<script src="js/jquery-2.1.4.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lang.js"></script>

Locally it works perfectly, but when it's on server, it doesn't open the webpage at all, all I see is a blank page.

I tried also to write it inside the html with script> tag, it didn't work either.

In network tab of dev tools, the jquery-2.1.4.min.js file and bootstrap files showing as 200 status.

There are no errors on console

Can anyone help please?

Thank you in advance

Answer 1

Here is my version of your function. It loops through the array of langs, then grabs a queryselectorAll of the matching lang elements. If the passed language matches the array element in the loop the display is set to block, else its set to none.

langs = ["en", "es"];

function setLangStyles(lang) {
  for (z = 0; z < langs.length; z++) {
    l = langs[z]
    objs = document.querySelectorAll(":lang(" + l + ")");
    objs.forEach(function(el) {
      el.style.display = (l == lang) ? "block" : "none";
    });
  }
}

btns = document.querySelectorAll("button");

btns.forEach(function(e){
   e.addEventListener("click",function(ev){
      setLangStyles(ev.target.dataset.lang);
   });
});

setLangStyles("es");

<div lang="en">EN</div>
<div lang="es">ES</div>
<button type="button" data-lang="es">View ES</button>
<button type="button" data-lang="en">View EN</button>