CODEWITHSUNDEEP
javascripthtmlcss
A. Meshu
A. Meshu

Reputation: 4148

Toggle lang attribute

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?

Upvotes: 0

Views: 511

Answers (1)

Sabrina Fernandez Vazzino
Sabrina Fernandez Vazzino

Reputation: 156

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.

Upvotes: 1

Related Questions