0

These are the two functions in my program.

Function 1:

 var parentLI;    //Global variable so can be accessed in both functions                         

 $(document).on("click", ".addmorebrands", function() {
            parentLI = $(this).closest('li');                            //Will the value of parentLI local to function 1 only ?
            $('#exampleModalCenter').modal('show');
            $('#exampleModalCenter img').click(function() {
                parentdiv = $(this).closest('div.outerdiv');             //Varbiale local to function 1
                parentdiv.addClass('preselect');
                parentdiv.siblings().removeClass('preselect');
                selectedImageSRC = $(this).attr('src');                  //Varbiale local to function 1
            })
        });

Function 2:

$('#add-image').click(function(){
        parentLI.append('<div class="imagewrap"><img class="images" src="'+selectedImageSRC+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>');
        var imageNameValue = parentLI.children('.imagenames').val();
        var imageTitleValue = parentLI.children('.hoverinformation').val();


        $('#exampleModalCenter').modal('hide');
        parentdiv.removeClass('preselect');          //How am I able to access parentdiv which is local to function 1

    });

Doubts I have regarding scope of variable

  1. The parentdiv is defined in Function1 and will be local to Function1. How am I able to access it in Function2
  2. The selectedImageSRC is defined in Function1 and will be local to Function1. How am I able to accesss it in Function2 In the line parentLI.append('<div class="imagewrap"><img class="images" src="'+selectedImageSRC+'" title="Manual Addition"> <input type="button" class="removediv" value="X" /></div>');
  3. The variable parentLI is declared outside both the functions so it will be global.But its value($(this).closest('li');) is assigned to it in Function1.How is that value($(this).closest('li');) accesible in Function2
Improve this question

3 Answers 3

Reset to default
2

When you define a variable without using a var, let or const keyword, it is defined in the global namespace (a.k.a. window). In contrast to PHP, the variables from the global namespace are automatically available inside functions. That's why parentdiv and the other variables are visible in the second function.

function test() {
    variable1 = 'foo';
    var variable2 = 'bar';
}

test();
console.log(typeof variable1); // 'string'
console.log(typeof variable2); // 'undefined'

Concerning the third question, a variable has the same value everywhere. You defined the variable in the common namespace, so both function see the same one variable which is defined globally, not locally.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

Variable with keyword var inside a function makes it local to that function and cant be accessed outside that function but only in that function.But if variable with keyword var declared outside function(in common name space) becomes a global variable and can be accessed anywhere in any function Correct me if I am wrong
Its bit strange or maybe since I am new to JS I am feeling it weird to digest
@NewBie In JS a good practice is always to use a var, let or const keyword to define a variable. In this case a variable will affect the local and child scopes ({ ... }) and won't affect parent and sibling scopes.
Essentially the variables inside a function without keyword var are actually global variables then
@NewBie Correct only for some cases. For example, you define a myVar variable in a function without a var keyword. If there is no myVar variable in the parent scopes, you will make a global variable. Otherwise you will overwrite a variable from a parent scope. Example: function t1 () { var myVar = 'foo'; function t2 () { myVar = 'bar'; } } (a global variable is not created).
|
2
  1. parentdiv isn't declared with the var keyword. that's a js hack to make a variable global from a local block. if you change the declaration to:

var parentdiv = $(this).closest('div.outerdiv');

you'll find out that it becomes local.

  1. same with selectedImageSRC

  2. if the variable is global, its value can be accessed from every function in the DOM regardless of how the value got there. that means that you should be aware of the order of execution

Improve this answer

1 Comment

Suppose that parentLI is delcared in common name space as var parentLI and if there were 4 functions which were accessing parentLI.Function 1 assigned some value to it and this value will be accessed in function 2.Now function 3 changed the value of parentLI then what value will be there in function 4(if parentLI is accessed in function4) Will it be of Function 1 or that of Function 3
2

1.parentdiv isn't declare with var keyword 

if you have to use parentdiv out side function 1 than you have to declare that variable globally and use in anywhere in js code of that page
<script>
var parentdiv="";
$(document).ready(function(){

});
</script>

you can declare like that for use variable globally in script for all.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.