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/

MarioRicalde · Accepted Answer · 2011-05-12 02:05:43Z

5

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.

answered May 12, 2011 at 2:05

MarioRicalde

9,4876 gold badges43 silver badges42 bronze badges

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

6 Comments

Salem Over a year ago

I take it Chrome is the widely-used debugger for javascript code, then? I usually code Java and have used a debugger before. Not sure why it never occurred to me to use one for Javascript. At any rate, that makes sense. My biggest fear with things like this is not understanding the mistake I made. I get that it essentially set currentPosition back to 0 every time I pressed the button. Thanks for your help. Also, I currently use Dreamweaver to type my code, only because I've never used anything else. Do you have a recommendation for an alternative?

MarioRicalde Over a year ago

Chrome is my preference, but you can use a debugger with almost every browser (read: Firefox, Safari, Opera). I suggest that you use console.log() to output logging messages to see how your code works and use break points.

MarioRicalde Over a year ago

Regarding the editors; my personal preference is TextMate for Mac, this is all about preference so you may try VIM or EMACS or even Notepad++

MarioRicalde Over a year ago

Remember that when you use var statement you're defining it for that block; if you don't use var you'll get the one available if any.

Shawn Over a year ago

or it will create the variable in the global scope (bad)

|

Ryan Olds · Accepted Answer · 2011-05-12 01:49:35Z

1

Each time the keydown event is fired you're redefining 'currentPosition' regardless of your current position in the slides. While, this isn't the only problem with the code, it's going to cause a bulk of the odd behavior. Fix that issue first and work from there. Shawn is right, use the debugger and set break points.

answered May 12, 2011 at 1:49

Ryan Olds

4,84730 silver badges24 bronze badges

Comments

Shawn · Accepted Answer · 2011-05-12 01:26:56Z

0

Do you know how to use a debugger? In chrome press ctrl + shift + j and choose the scripts tab. Navigate to your code and set a bunch of breakpoints. Refresh the page... you can then see what is going on in real time.

answered May 12, 2011 at 1:26

Shawn

19.9k20 gold badges101 silver badges155 bronze badges

1 Comment

Salem Over a year ago

Never knew you could do that with the Element Inspector. Still trying to figure out the problem, though. step step step

Collectives™ on Stack Overflow

Javascript button listener fires once?

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related