Toggle lang attribute

Question

After reading here I couldn't find any explanation why this not works. Suppose I got this HTML:

<p lang="xx">bla bla bla bla</p>
<p lang="xy">yada yada yada</p>
<p lang="xx">bla bla bla bla</p>
<p lang="xy">yada yada yada</p>
<p lang="xx">bla bla bla bla</p>
<p lang="xy">yada yada yada</p>
<p lang="xx">bla bla bla bla</p>
<p lang="xy">yada yada yada</p>

I'm trying to toggle between languages attributes. I thought doing something like that:

<label for="language">Language:</label>
<input type="radio" name="language" value="xy" oninput="changeLanguage(this.value);" checked /> xy
<input type="radio" name="language" value="xx" oninput="changeLanguage(this.value);" /> xx

Hiding one of the languages with CSS:

<style>
  [lang=xx] { display: none;}
</style>

And do the toggling with that JS:

<script>
  var language = document.getElementsByName('language');
  function changeLanguage(val) { 
    language.value = val;
    if (val = "xx") {
      document.write (
        "<style>" +
          "[lang=xx] {display: block;}" +
          "[lang=xy] {display: none;}" +
        "</style>");
    }
    if (val = "xy") {
      document.write (
        "<style>" +
          "[lang=xy] {display: block;}" +
          "[lang=xx] {display: none;}" +
        "</style>");
      }                                 
    }
  </script>

It doesn't work: clicking the radio button just empty's the screen. What am I missing here?

`document.write` replaces your complete HTML, that's why the screen is emptied. — Johannes, Jul 17 '17 at 22:05
But when i used document.write for css purpose it didn't replace the existing page's style. I thought that it might because the script is on the body part... Do you know where i can learn more on that? What terms should i search? — A. Meshu, Jul 19 '17 at 12:24

score 1 · Accepted Answer · answered Jul 17 '17 at 22:23

document.write won't work for what you are trying to do. Add a class attribute to all your paragraph elements:

<p class="langitem" lang="xx">bla bla bla bla</p>
<p class="langitem" lang="xy">yada yada yada</p>
<p class="langitem" lang="xx">bla bla bla bla</p>
<p class="langitem" lang="xy">yada yada yada</p>
<p class="langitem" lang="xx">bla bla bla bla</p>
<p class="langitem" lang="xy">yada yada yada</p>
<p class="langitem" lang="xx">bla bla bla bla</p>
<p class="langitem" lang="xy">yada yada yada</p>

and then chage your script to this:

<script>
var language = document.getElementsByName('language');
function changeLanguage(val) { 
    language.value = val;

    var arr_elms = [];
    arr_elms = document.getElementsByClassName("langitem");
    for (var i = 0; i < arr_elms.length; i++) {
        if(arr_elms[i].getAttribute("lang") == val)
            arr_elms[i].style.display = 'block';
        else 
            arr_elms[i].style.display = 'none';
    }
}
</script>

That should work as you are expecting.

Sorry for the time and thank you for your answer. I try to toggle between attribute lang - to toggle between classes i know. anyway i found solution to my problem here: https://stackoverflow.com/questions/32008125/using-javascript-to-change-website-language/43033380#43033380 — A. Meshu, Jul 19 '17 at 12:21

Toggle lang attribute

1 Answers1