Same variable in two different script tags

Question

Here's my first tag

<script type="text/javascript"> 
$(document).ready(function () {

    // some code

    var showWarning = true;

    // more code

});
</script>

And then I have another script tag:

<script type="text/javascript">
    function submitFormLink(){
        document.getElementById('vacationApplicationForm').action = '<c:url value="/preview-pdf"/>';
        document.getElementById('vacationApplicationForm').method = 'POST';
        document.getElementById('vacationApplicationForm').submit();
    }
    function submitFormButton(){
        if (showWarning == true){
            alert("hi");
        }
        document.getElementById('vacationApplicationForm').action = '';
        document.getElementById('vacationApplicationForm').method = 'POST';
        document.getElementById('vacationApplicationForm').submit();
    }
 </script>

And I get an error saying that showWarning is undefined. I read that variables a global in the same window. So what am I doing wrong herE ?

Answer 1

You aren't declaring a global.

You are using the var keyword inside a function so:

• It won't be defined until the function runs
• It will be local to the function

If you want a global, create the variable in the global scope:

<script type="text/javascript"> 
var showWarning = true;
$(document).ready(function () {
    // some code
    // more code
});
</script>

Answer 2

Your variable showWarning is not global. The scope is the document ready handler. If you want to make it global, you'd have to do something like this

<script type="text/javascript"> 

var showWarning = true; // now it has global scope

$(document).ready(function () {
    // some code
    // more code
});
</script>

Using global variables is considerer a bad practice in javascript so you should avoid doing this every time is possible. For more information about this, look on google for Pollution of the Global Namespace