title: Toggle lang attribute
body: <p>After reading here I couldn't find any explanation why this not works.
  Suppose I got this HTML:</p>
  
  <pre><code>&lt;p lang="xx"&gt;bla bla bla bla&lt;/p&gt;
  &lt;p lang="xy"&gt;yada yada yada&lt;/p&gt;
  &lt;p lang="xx"&gt;bla bla bla bla&lt;/p&gt;
  &lt;p lang="xy"&gt;yada yada yada&lt;/p&gt;
  &lt;p lang="xx"&gt;bla bla bla bla&lt;/p&gt;
  &lt;p lang="xy"&gt;yada yada yada&lt;/p&gt;
  &lt;p lang="xx"&gt;bla bla bla bla&lt;/p&gt;
  &lt;p lang="xy"&gt;yada yada yada&lt;/p&gt;
  </code></pre>
  
  <p>I'm trying to toggle between languages attributes. I thought doing something like that:</p>
  
  <pre><code>&lt;label for="language"&gt;Language:&lt;/label&gt;
  &lt;input type="radio" name="language" value="xy" oninput="changeLanguage(this.value);" checked /&gt; xy
  &lt;input type="radio" name="language" value="xx" oninput="changeLanguage(this.value);" /&gt; xx
  </code></pre>
  
  <p>Hiding one of the languages with CSS:</p>
  
  <pre><code>&lt;style&gt;
    [lang=xx] { display: none;}
  &lt;/style&gt;
  </code></pre>
  
  <p>And do the toggling with that JS:</p>
  
  <pre><code>&lt;script&gt;
    var language = document.getElementsByName('language');
    function changeLanguage(val) { 
      language.value = val;
      if (val = "xx") {
        document.write (
          "&lt;style&gt;" +
            "[lang=xx] {display: block;}" +
            "[lang=xy] {display: none;}" +
          "&lt;/style&gt;");
      }
      if (val = "xy") {
        document.write (
          "&lt;style&gt;" +
            "[lang=xy] {display: block;}" +
            "[lang=xx] {display: none;}" +
          "&lt;/style&gt;");
        }                                 
      }
    &lt;/script&gt;
  </code></pre>
  
  <p>It doesn't work: clicking the radio button just empty's the screen. What am I missing here?</p>