Javascript button listener fires once?

Question

I'm making a slideshow-type rotator for a website I'm making. The rotator itself works fine, but I'm trying to make the slideshow slide forward/back with the left/right keys on the keyboard. My code is this:

$(document).keydown(function(e){
    var currentPosition = 0;
    var slideWidth = 836;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var animLength = 600;
    if (e.keyCode == 37) { 
          currentPosition = currentPosition-1;
            // Check to see if new position is unbounded, and wrap accordingly.
            checkForEnds(currentPosition);
            // Move slideInner using margin-left
            $('#slideInner').animate({
              'marginLeft' : slideWidth*(-currentPosition)
            }, animLength, 'easeOutExpo');
            animLength=600;
       return false;
    }
    /*Same code for right button, removed to save space.*/
    function checkForEnds(position){
    // If left is clicked on first slide, wrap to end.
    if(position==-1){currentPosition = numberOfSlides-1, animLength=1000}
    // If right is clicked on last slide, wrap to beginning.
    if(position==numberOfSlides){currentPosition = 0, animLength=1000}
  }
});

My code works fine, but only once. I can rotate left once or right once, but after I do, I can't re-use the same key until another has been pressed. I'm very new to Javascript input, is there a simple fix for this?

Here's the temporary site. It's a mess for right now, but I can take care of all the weird ordering things and layout issues quite well. http://technoheads.org/test/ice/

Answer 1

Ok, I worked this out.

This has nothing to do with the fact that you're binding an event; the event is triggered correctly, but the equation you use to calculate the position is incorrect.

You're defining the currentPosition var inside the block; so it's defined every time you use trigger the event; so you'll always get the same value once it's triggered.

What I did to solve this is move the currentPosition to the global space.

Check it live here: http://jsfiddle.net/kuroir/SSd3r/

Also please note that it's important for you to use the debugger when you're working with this kind of problems, I highly recommend you to use Google Chrome for this.