Global Variable Throwing "Undefined" error in hover function

Question

I have this global variable which is used as counter which I want to access in the jquery hover function. But some how the variable is throwing "undefined" error when I try to access it in the hover function. The code is

var i = 0

$('#ticker-area').hover(function() {
    alert(i); //THROWS UNDEFINED ERROR  
    clearTimeout(t1);   
    if (i > 0) {  
        alert(i); //NEVER REACHES HERE  
        var i = i - 1;  
        var innerText = tickerItems[i];  
        i++;  
    }  
    $('#ticker-area').html(innerText);  
}, function() {  
    clearTimeout(t1);  
    rotateTicker();  
});  

Please help. Thanks Paddy

Answer 1

If you are new to javascript always use http://www.jslint.com/ to check your code.

Checking your code I get the following errors:

Problem at line 1 character 10: Missing semicolon.

var i = 0

Problem at line 8 character 15: 'i' is already defined.

var i = i - 1;

Problem at line 12 character 28: 'innerText' used out of scope.

$('#ticker-area').html(innerText); 

So

1. put a semicolon in line 1
2. remove the var declaration in line 8
3. put the var innerText declaration at the begining to make it visible

Answer 2

It is not a global variable if you usevar. When this is declared the variable is restricted to the function it is contained in. Either move the declaration into the function Or don't use the term var

edit

Take a look at this site for more info. This is the cause of the issue you are having now. Once you correct this you should take into account the suggestions in the other comments as these will become issues as well

Answer 3

Its because you are defining var i again:

var i = i - 1;

Answer 4

You need to put a ; at the end of the line var i = 0