Variable Scope not working like I thought- Not able to access variable

Question

I have a variable in on load that I wish to access in another script. I wanted the variable runningSlider in onload to be global so that my button function could see it. It doesn't seem to be able to see it, as I get the error messsage: Cannot read property stop of null.

<script type="text/javascript">
$(window).load(function() {
    $('#c1').nivoSlider({ effect: 'fade' });
    runningSlider = 1; 
});
</script>

<script type="text/javascript">
$('#slideButtons button').click(function(){        
    var newID = $(this).attr("id");
    alert (newID);
    alert ('test of variable ' + runningSlider);
    $('#c' + runningSlider).data('nivoslider').stop();     
    $('#c' + newID).data('nivoslider').start();
    var runningSlider = newID;
});
</script>

Thank you for your help.

You have a syntax error; missing }) in the first <script> block — Phil
– Phil, Commented Jun 17, 2015 at 0:11
@depperm No it is not initialized as var in the first script. I thought that I wasn't supposed to use var so that it would be a global variable. — geddeca
– geddeca, Commented Jun 17, 2015 at 1:03
@Phil = I fixed that in my post. Thank you. It was actually already in my code. Just sloppy copying. — geddeca
– geddeca, Commented Jun 17, 2015 at 1:04

jfriend00 · Accepted Answer · 2015-06-17 00:17:21Z

5

runningSlider in your onload handler is an implicit global variable because there is no var declaration within scope for it. If you are not running in strict mode, then assigning to an undeclared variable will automatically create a global by that name (this is generally considered a bad practice).

runningSlider in your click handler is a local variable only available inside that function. When a variable is declared with var within a function, then the variable becomes a local variable, available only within the scope of that function. If you use var to declare a variable of the same name as a global, then the local variable "hides" or "overrides" the global name and any references to that variable name within the scope will access the local variable, not the global variable.

As you've written it, the two are completely separate variables.

If you want to share a single global, then the way to do that is like this:

<script type="text/javascript">
// declare global
var runningSlider;
$(window).load(function() {
    $('#c1').nivoSlider({ effect: 'fade' });
    // set global
    runningSlider = 1; 
});
</script>

<script type="text/javascript">
$('#slideButtons button').click(function(){        
    var newID = $(this).attr("id");
    alert (newID);
    alert ('test of variable ' + runningSlider);
    $('#c' + runningSlider).data('nivoslider').stop();     
    $('#c' + newID).data('nivoslider').start();
    // update global
    runningSlider = newID;
});
</script>

FYI, you were also missing a }); to close your load handler.

edited Jun 17, 2015 at 0:17

answered Jun 17, 2015 at 0:12

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

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

6 Comments

geddeca Over a year ago

Thank you for your explanation. I took out the var in the click and Yes this worked. But if this is bad code, is there a better way to do this? Will it cause me unforeseen problems? This is just being used in a 5 page website with only me taking care of it.

jfriend00 Over a year ago

I don't know the whole context, but it may be OK to use the global, just make sure you declare it in the global scope like my code shows rather than using an implicit global that isn't actively declared.

geddeca Over a year ago

ah, Now I get it: I was thinking that only one function between each script but that is not the case at all I see. I bit off more than I can chew comfortably by taking on our choirs website I am stuffing in as much as I can though :) I really appreciate your help.

jfriend00 Over a year ago

@geddeca - since it looks like you're fairly new here at StackOverflow, are you aware that if you get your question answered, you can select a best answer by clicking the green checkmark to the left of that answer. This will earn both you and the answered some reputation points and will indicate to the community that you're question has been answered.

geddeca Over a year ago

thank you for pointing that out. I checked it and hit the up arrow. I am also wondering if there is some way to mark text as code in a comment. not just in my original post.

|

Collectives™ on Stack Overflow

Variable Scope not working like I thought- Not able to access variable

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related