How to change the value of a global variable when a user select an option

i have the html below where i let the user choose between two options

<div style="float:right; line-height:60px; margin-right:18px; color:#666;">Language
                    <select name="lang2" id="lang2" style="width:100px;" autocomplete="off">
                        <option value="gr" selected>Greek</option>
                        <option value="en">English</option>
                    </select>
</div>

After that i initialize a global variable that gets the “gr” value. I want to change the global value based on what the user chooses from the drop down menu (gr or en). On change selection event, i tried the code below but the variable Language only changes inside the function but outside it remains unchanged (Language = “gr”;)

<script type="text/javascript">
   
var Language = "gr";

function langChanged(lang) {
    if (lang !== Language) {
        Language = lang;

        return Language;
        
    }
}

$(document).ready(function () {
        Language = $('#lang2 option:selected').val();
        $("#lang2").on("change", function () {
            if (confirm("The language will be changed.Are you sure?")) {

                if ($(this).val() == "gr") {
                    langChanged("gr");
                   //Language="gr";
                }
                else if ($(this).val() == "en") {
                    langChanged("en");
                   //Language="en";
                }

            }

        });

    });
    
//Language remains "gr"

var title = Language == 'gr' ? 'Greek title' : 'English title';
var title2 = Language == 'gr' ? 'Greek title2' : 'English title2';

alert (title);...
alert (title2);...

</scipt> ```

Answer

You need to update all of your global variables after you change the language the lines that use the Language variable do not auto rerun when you update the variables so you need to update them. So you would need to add the title and title2 lines inside of your function.

var Language;
var title1;
var title2;

function langChanged(lang) {
    if (lang !== Language) {
        Language = lang;
        title1 = Language == 'gr' ? 'Greek title' : 'English title';
        title2 = Language == 'gr' ? 'Greek title2' : 'English title2';
    }
}

$(document).ready(function() {
  Language = $('#lang2 option:selected').val();
  langChanged(Language);
  $("#lang2").on("change", function() { /* ... */ });
});

How I would do it

var myLanguage;
var myTranslations;

var translations = {
  gr: {
    title: "Greek Title",
    title2: "Greek Title 2",
  },
  en: {
    title: "English Title",
    title2: "English Title 2",
  },
}

function updateGlobals(){
  myTranslations = translations[myLanguage];
  console.log(myTranslations.title);
  console.log(myTranslations.title2);
}

function langChanged(lang) {
  if (lang !== myLanguage) {
    myLanguage = lang;
    updateGlobals();
  }
}

$(document).ready(function() {

  myLanguage = $('#lang2 option:selected').val();
  langChanged(myLanguage);

  $("#lang2").on("change", function() {
    if (confirm("The language will be changed. Are you sure?")) {
        langChanged($(this).val());
    } else {
      // reset it back to what it is since they cancelled it
      window.setTimeout(function () {
        $(this).val(myLanguage);
      }, 10);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="float:right; line-height:60px; margin-right:18px; color:#666;">Language
  <select name="lang2" id="lang2" style="width:100px;" autocomplete="off">
    <option value="gr" selected>Greek</option>
    <option value="en">English</option>
  </select>
</div>