Javascript - passing language to iframe

Question

Javascript - passing language to iframe

I am using the below code to show / hide divs by class so that when the language is selected only the right divs are visible.

This works great when the language is selected using radio buttons, but when a new page is loaded into the iframe, the language preference is not applied to that page. I'm trying to use sessionStorage for this, and got to the point of passing an argument to a newly loaded page in an iframe:

THIS is in head.html index.html to change show / hide on loaded page when radio button changes:

<script>
function setlang(lang) {
    var i;
    var len;
    var list;
    var ifr = document.getElementById('mainframe');
    var cw = (ifr.contentWindow || ifr.contentDocument);

    list = cw.document.getElementsByClassName('langdiv');

    for (i=0, len=list.length ; i<len ; i++){
        list[i].style.display = 'none';
        }

    list = cw.document.getElementsByClassName(lang);

    for (i=0, len=list.length ; i<len ; i++){
        list[i].style.display = 'block';
        }
}

</script>

THIS is in the body of index.html to apply the new language and store it in sessionStorage:

    <div class="switch">
            <input id="english" name="view" type="radio" checked onclick="setlang('EN'); sessionStorage.setItem('language', 'EN');">
            <input id="deutsch" name="view" type="radio" onclick="setlang('DE'); sessionStorage.setItem('language', 'DE');">    
            <input id="francais" name="view" type="radio" onclick="setlang('FR'); sessionStorage.setItem('language', 'FR');">   
            <input id="italiano" name="view" type="radio" onclick="setlang('IT'); sessionStorage.setItem('language', 'IT');">   
    </div>

<div id="iframe"><iframe name="mainframe" id="mainframe" src="home.html"></iframe></div>

... and inside the given iframe, I retrieve the sessionStorage argument (this code was only used to make sure it works - I don't need to display the sessionStorage argument:

<script>
    window.onload=function applylanguagechoice() {
        if(typeof(Storage) !== "undefined") {
        document.getElementById("language").innerHTML = "SELECTED LANGUAGE=" +           sessionStorage.language;
        } 
    }
</script>

Rather, I need to use it to show / hide the right div classes, which are organized like this inside the iframe:

   <div class="EN languid">Hello</div>
   <div class="DE languid">Guten Tag</div>
   <div class="FR languid">Bonjour</div>
   <div class="IT languid">Ciao</div>

As of now, I have the following (very clumsy in my assessment) code to take a value from sessionStorage:

<script>
    $(document).ready(function(){
        var selectedlanguage = sessionStorage.getItem("language");

        if (selectedlanguage == 'EN') {
            $('.EN').show();
            $('.DE').hide();
            $('.FR').hide();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'DE') {
            $('.EN').hide();
            $('.DE').show();
            $('.FR').hide();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'FR') {
            $('.EN').hide();
            $('.DE').hide();
            $('.FR').show();
            $('.IT').hide();
            } 

        if (selectedlanguage == 'IT') {
            $('.EN').hide();
            $('.DE').hide();
            $('.FR').hide();
            $('.IT').show();
            } 
    });
</script>