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

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> ```

CodePudding user response：

Consider the following example:

$(function() {
  var Language = "gr";

  function langChange(lang) {
    if (lang !== Language) {
      Language = lang;
    }
    return Language;
  }

  $("#lang2").on("change", function(e) {
    e.preventDefault();
    if (confirm("The language will be changed. Are you sure?")) {
      langChange($(this).val());
    } else {
      $(this).val(Language);
    }
    console.log(Language);
  });
});

<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>

CodePudding user response：

First of all, in order for your variable Language to update, you will need to pass it inside your $(document).ready function. Otherwise, it won't never render and thus won't update the value of your Language variable.

In this case, I have used the let instead of var as they are block-scoped and you can easily work with this kind of variables as they are more intuitive in my opinion.

At the end, you need also to move the var title and var title2 inside the document.ready(function().

As I mentioned before in my first annotation, if you would have placed them outside your document.ready(function(), the DOM won't get updated at all with the data that you are trying to change. Personally, I would use Vanilla Javascript as I am not really fond of Jquery.

Pure JavaScript can be faster for manipulating and selecting the DOM than jQuery.

JavaScript is directly processed by the browser and it curtails the overhead which JQuery actually has.

I hope my answer helps you for solving the question.

$(document).ready(function () {
   let Language = "gr";
   let lang2Selector = document.getElementById("lang2");
   // 
   function langChanged(lang) {
      if (lang !== Language) {
         let value = lang;
         return value;
        }
    }
 lang2Selector.addEventListener("change", function () {
   
    let Language = this.options[this.selectedIndex].text;
   
    if (confirm("The language will be changed.Are you sure?")) {     
      if (this.value == "gr") {
         langChanged("gr");
         Language = "gr";
      } else if (this.value == "en") {
         langChanged("en");
         Language="en";
     }
    }
   var title = Language == 'gr' ? 'Greek title' : 'English title';
   var title2 = Language == 'gr' ? 'Greek title2' : 'English title2';
   alert (title);
   alert (title2);
 });
});

<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>

CodePudding user response：

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>