CODEWITHSUNDEEP
javascriptjquery
Spdexter
Spdexter

Reputation: 933

Scope of JS variables - inside function

http://jsfiddle.net/8Lc4N/1/

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

Upvotes: 0

Views: 66

Answers (4)

Guffa
Guffa

Reputation: 700212

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));

Upvotes: 2

suneetha
suneetha

Reputation: 827

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/

Upvotes: 1

Amir Popovich
Amir Popovich

Reputation: 29836

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.

Upvotes: 1

Felix
Felix

Reputation: 38102

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

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

instead of:

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

Updated Fiddle

Upvotes: 3

Related Questions