Getting a global JS variable to 'work' inside a function

Question

I am having trouble getting what I believe to be a global JS variable to work inside a function. Here's a partial extract from my code:

<script>
    prop_no = 2;
    if (prop_no) {
        alert ('global prop_no initialised ' + prop_no);
    } else {
        alert ('no prop_no');
    }

    function getHtml() {
//      alert('getHtml called');
        var len = $('ul.extraProperty').length; //  length of <ul> containing the added properties
        if (prop_no) {
            alert ('prop_no valid locally '+ prop_no);
        } else {
            alert ('no local prop_no');
        }

        ... more code...

    }

    ... more ...

    getHtml();

</script>

I want to compare the value of 'len' with 'prop_no' and adjust the value of 'prop_no' according to the result, before doing some other stuff.

I've always understood that if a var is declared globally (outside the function) then it will be available inside, but that doesn't seem to be what I'm getting. When the function is called I'm expecting the Alert "prop_no valid locally 2", but I actually get "no local prop_no". I can't see why.

If I change the function to:

 function getHtml(prop_no)...

and the call to:

 getHtml(prop_no);

then I get what I'm after. However, I'm not entirely confident what value is going to be picked up in that circumstance (the function is called from a checkbox 'Add another property').

See: https://jsfiddle.net/ramasaig/yrpoo6v7/18/ I'm aware the 'Remove Proprty' button doesn't yet work; that's what I'm working on, because removing a property affects the property numbers.

There may also be some other variables I want to declare globally and use inside the function. I'll also need any changes made to those variables inside the function to apply next time the function is called. I have looked at the scoping rules, and it seems to me that what I'm doing ought to work, but it doesn't.

Can someone tell me what I'm doing wrong here (or why it won't work whatever I do, if that's the case), please.

Answer 1

On line 38 in your fiddle, you are setting a local var prop_no which is shadowing the reference to the outer prop_no variable.

 31. if (prop_no) {
 32.    alert ('local prop_no initialised' + prop_no);
 33. } else {
 34.    alert ('no local prop_no');
 35. }
 36.
 37. //     alert('length is ' + len);
>38. var prop_no = len + 2; //  makes first sub-form 'Property 2' // <-- RIGHT HERE

Answer 2

The difference between your code in the question and the jsfiddle is this:

prop_no = 2;

and

prop_no = 2
var prop_no = len + 2

ie prop_no is declared inside the getHtml() method even though it's "declared" after you've used it.

In javascript, it doesn't matter the order that you put the 'var' - if there's a var inside a method, the variable will be scoped inside that method.

This is why it works for @Andy who's copied your code directly and not for you - the question doesn't include all the details.