CODEWITHSUNDEEP
javascripthtmlcsslang
Guy
Guy

Reputation: 35

Trying to wrap my head around this multiple html select that need to run the same js code

I've been trying for hours to get this working, but I'm simply missing something simple (I'm not a programmer).

I have this code I've picked and mashed up from various sites including this one:

<body onload="runme(sessionStorage.getItem('lang'))">

<script type="text/javascript" language="javascript">
function runme(lang) {
if (lang == "en") {
$('[lang="he"]').hide(); $('[lang="en"]').show(); } else {
    $('[lang="en"]').hide(); $('[lang="he"]').show(); };
$('#lang-switch, #en-lang-switch').change(function () {
    var lang = $(this).val();
    switch (lang) {
        case 'en':
            $('[lang="he"]').hide();
            $('[lang="en"]').show();
            sessionStorage.setItem("lang","en");
        break;
        case 'he':
            $('[lang="en"]').hide();
            $('[lang="he"]').show();
            sessionStorage.setItem("lang","he");
        break;
        default:
            $('[lang="en"]').hide();
            $('[lang="he"]').show();
            sessionStorage.setItem("lang","he");
        }
});
};
</script>

Then I have a

<section lang="he">
SOME HEBREW TEXT
<select id="lang-switch">
          <script type="text/javascript" language="javascript">
            if(sessionStorage.getItem('lang')=="he") { 
                $('#lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
            } else {
                $('#lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
                }
        </script>
    </select>
</section>

and then I have another section in English:

<section lang="en">
SOME TEXT IN ENGLISH
<select id="en-lang-switch" lang="en">
            <script type="text/javascript" language="javascript">
                if(sessionStorage.getItem('lang')=="en") { 
                    $('#en-lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
                } else {
                    $('#en-lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
                    }
            </script>
        </select>
</section>

in style.css I have

[lang="en"] {
  display: none;
}

[lang="he"] {
  display: none;
}

What I want to accomplish is the select will always show the current language as the first and selected in the drop down options.

I think $(this).val() gets two values one from lang-switch and one from en-lang-switch, when I press an option in the select menu, they are always differ and it always choose the first.

I don't know how to overcome that.

You can see the entire code on my site https://siace.co.il

One notes: the sessionStorage is used so I would keep the same language when I go to a different page on the site.

Upvotes: 0

Views: 36

Answers (1)

leteu
leteu

Reputation: 171

Exception handling should be put in when sessionStorage.getItem('lang') is undefined. like

<section lang="he">
    SOME HEBREW TEXT
    <select id="lang-switch">
        <script type="text/javascript" language="javascript">
            if(sessionStorage.getItem('lang')=="he" || sessionStorage.getItem('lang')== undefined) { 
                $('#lang-switch').html('<option value="he"  selected>עברית</option><option value="en">English</option>');
            } else {
                $('#lang-switch').html('<option value="en"  selected>English</option><option value="he">עברית</option>'); 
            }
        </script>
    </select>
</section>

a way to set it to a value that should always be selected in this way.

$('#lang-switch, #en-lang-switch').change(function () {
    ...
    $('#lang-switch').val('he')
    $('#en-lang-switch').val('en')
}
...
<section lang="he">
    SOME HEBREW TEXT
    <select id="lang-switch">
        <option value="he" selected>עברית</option>
        <option value="en">English</option>
    </select>
</section>
...
<section lang="en">
    SOME TEXT IN ENGLISH
    <select id="en-lang-switch" lang="en">
        <option value="en" selected>English</option>
        <option value="he">עברית</option>
    </select>
</section>

Upvotes: 0

Related Questions