Scope of JS variables - inside function

Question

Hi

    <h2 id="h2">click me </h2>
    <p class="shirt"> </p>

    var test = "reddish";  // Global scope ??
    var hm;

    console.log(test); //value is 'reddish' here 

    function red(test) // passing 'reddish'
    {
    var reddy= "blue"; // local scope - using this another var produces blue shirt 
    console.log(test);  // i dont understand how it is 0 here 
    hm =test + "shirt";  
    return hm;
    }


    $(function(){
      $('#h2').click(function(){
         $('.shirt').html(red);

      });
    });

I am trying to print "Red shirt " inside

.

But the value of test becomes '0' inside function red();

Also when i declare a variable inside function red() (eg reddy.. ) it is correctly used as blue.

So i would like to know what mistake i am doing and how can i pass test into the function as is.

Thanks

Felix · Accepted Answer · 2014-05-03 10:58:52Z

3

You need to pass the test variable into your red function, so use:

$('.shirt').html(red(test));

instead of:

$('.shirt').html(red);

Updated Fiddle

answered May 3, 2014 at 10:58

Felix

38.2k8 gold badges46 silver badges56 bronze badges

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

1 Comment

Spdexter Over a year ago

Thanks ! got it! could you please tell me why the 'test' variable's value becomes zero inside function red()?

Guffa · Accepted Answer · 2014-05-03 11:22:59Z

You are passing a function reference to the html method, so the function will be called for each element with two parameters; the index of the element in the jQuery object and the current HTML code of the element.

It's the same as looping through the elements in the jQuery object and calling the function for each of them to get the HTML code to put in the element:

var j = $('.shirt');
for (var i = 0; i < j.length; i++) {
  j.eq(i).html(red(i, j.eq(i).html()));
}

As the function takes one parameter, it will be the index of the element in the jQuery object, in this case zero as there is just one element.

The parameter test in the function is not the same as the variable test in the global scope. As you have named them the same the parameter will shadow the global variable for the code inside the function.

To make the parameter test get the value from the global variable test you need to call the function with that value:

$('.shirt').html(red(test));

Amir Popovich · Accepted Answer · 2014-05-03 11:03:43Z

1

Your code with a little explaination

var test = "reddish";  // Global scope - the var is saved on the window.
console.log(test); // same as console.log(window.test)
function red(test) // you declared a function with an input param named test. this is not the same test.

console.log(test);  // test is nothing in this case since you called the red function with no param.

Change the call to:

        $('.shirt').html(red(test)); // call function red with the correct input param.

answered May 3, 2014 at 11:03

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

Comments

suneetha · Accepted Answer · 2014-05-03 11:07:43Z

Your are not passing any parameter value to function "red".So, it is taking test value as "0" If you pass any value, then it will prints that value instead of "0".

Code:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="jquery.js"></script>
 </head>
 <body>
  <h2 id="h2">click me </h2>
  <p class="shirt"> </p>
      <script type="text/javascript">
         var test = "reddish"; // Global scope ??
         var hm;
         console.log(test);
         function red(test) {
           var reddy = "blue"; // local scope - using this var produces blue shirt 
           console.log(test);
           hm = test + "shirt";
           return hm;
        }


     $(function() {
       $('#h2').click(function() {
         $('.shirt').html(red(test));
       });
     });
  </script>
 </body>
</html>

JS Fiddle: http://jsfiddle.net/NZBNW/2/

Collectives™ on Stack Overflow

Scope of JS variables - inside function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related