Navigate between text fields using javascript and two arrows icons

Question

I'm looking to make 2 arrows (Up & Down buttons). Both are .gif. the thing is:

I have form with 4 text fields. How do I make it so that when I click the Down button.gif I navigate to the next text field then if press again I navigate to another field, and if I press Up button.gif to navigate up to the previous field like with a keyboard using arrows but instead using 2 images up & down.

How have to be the javascript function for this?

Answer 1

If you add the attribute tabindex to the different input fields you can access them with document.querySelector('input[tabindex="1"]') (replace 1 with current field tabindex) and call .focus() on them.

Basic example: http://jsfiddle.net/xc2n7/