Define global variable in JQuery

Question

I'm not sure if I'm explaining this right, but here it goes ...

I have a function that works in JQuery to assign the selected dropdown value to a variable and then pass the variable to a different part of the HTML when a confirmation button is clicked.

Here's a stripped down version of the HTML

<p id="t1"></p> 
<select id="selectLevel">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
   <option value="6">6</option>
   <option value="7">7</option>
   <option value="8">8</option>
   <option value="9">9</option>
   <option value="10">10</option>
   <option value="11">11</option>
   <option value="12">12</option>
   <option value="13">13</option>
   <option value="14">14</option>
   <option value="15">15</option>
   <option value="16">16</option>
   <option value="17">17</option>
   <option value="18">18</option>
   <option value="19">19</option>
   <option value="20">20</option>
</select>
<span class="btn" id="confirmLevel">Confirm</span>

And here's the JQuery I used.

$(document).ready(function() {
    $('#confirmLevel').click(function() {
        var PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

The problem is, if I later try to call the PCLevel variable for other functions, nothing happens. What am I missing here? Or would it be better to skip JQuery altogether and just use Javascript to do the same thing?

Answer 1

The problem is that PClevel is scoped inside the click handler. It cannot be accessed outside. In order for code outside to see PClevel , declare it outside and have the click handler just modify it.

$(document).ready(function() {
    var PClevel; // Code inside the ready handler can see it.

    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

// or

var PClevel; // Now it's a global. Everyone can see it.
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

Answer 2

Simply declare the variable on the global scope.

var PClevel = '';
$(document).ready(function() {
    $('#confirmLevel').click(function() {
        PClevel = $("#selectLevel option:selected").text();
        $('#t1').append('Level ' + PClevel); 
    });
});

It would be worth reading up on javascript scopes as they are relevant whether you are using jQuery or not.

http://www.sitepoint.com/demystifying-javascript-variable-scope-hoisting/

Answer 3

Define PClevel as Global Variable var PClevel; and update the var on select change so you can access it across different functions.

$(document).ready(function() {
  var PClevel;
  PClevel = $("#selectLevel option:selected").text();
  $('#selectLevel').change(function(){
    PClevel = $("#selectLevel option:selected").text();
  });
  $('#confirmLevel').click(function() {
    $('#t1').append('Level ' + PClevel); 
  });
});

Plnkr Example : https://plnkr.co/edit/4KsLTahhq146ttwEcX8E?p=preview

Updated Plnkr with multiple functions

Answer 4

我们可以使用 window 对象，并将这个 window 对象上的变量设置为：

window.PClevel = 'value'