Function not firing correctly on first click

Question

I have a function that makes two buttons. One button will auto scroll down and the other up.

It goes through an array and changes the button on every tap.

My problem is that I have to click the button twice to get it to work and then it does not get fired after that at all.

Is there a logic error in here I am not seeing?

What I want it the arrows to act like the twitter bootstrap image carousal. I want to click the arrows and have them take me to the next or previous section.

This is a screenshot of the the page and the arrows I am trying to change IMG REMOVED

URL REMOVED

Sorry, I removed the img and url but with this site not being live yet, it shouldn't be viewed like that. I was in a pickle though.

I solved the problem. Read the comments if you have a similar one like this. Thanks everyone!

$(function () {
    var leftArrow = $('#left-arrow')
    var rightArrow = $('#right-arrow')




    rightArrow.bind("tap", rightTapHandler)
    function rightTapHandler(event){
        if (ai == 0) {
            alert('0' + event)
            ai = 1
            controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[0] + '<div id="left-arrow" class="arrow"></div></a>';
            return 
        } else if (ai > 0) {
            alert(ai)
            ai++
            controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
            return                    
        } else if (ai >= linkArrayBackswards.length) {
            ai = linkArrayBackswards.length;
            controllerContainer.innerHTML = linkArrayForwards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayForwards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
            return 
        }  else {
            alert('nothin')
            return false
        }


    };
    leftArrow.bind("tap", leftTapHandler)
    function leftTapHandler(event) {
        if (ai == 0) {
            alert('0' + event)
            ai = 1
            controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[0] + '<div id="left-arrow" class="arrow"></div></a>';
            return 
        } else if (ai > 0) {
            alert(ai)
            ai--
            controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
            return 
        } else if (ai >= linkArrayBackswards.length) {
            ai = linkArrayBackswards.length;
            controllerContainer.innerHTML = linkArrayBackswards[ai] + '<div id="right-arrow" class="arrow"></div></a>' + linkArrayBackswards[ai - 1] + '<div id="left-arrow" class="arrow"></div></a>';
            return 
        } else {
            return false
        }

    };
})

Answer 1

From what i notised on your website, it alerts "0[option Option]" on the first click on any of the two arrows.

    if (ai == 0) {
        alert('0' + event)
        ai = 1

"ai == 0" must be true.. It's the only alert with "0" in it and the only reason it would pop that alert, as far as i know & see.

Apart from that, once you have clicked OK on the alert, the arrows seem to work perfectly fine for me..

Edit
Are you sure you are declaring ai before the "if (ai == 0)" check? If you aren't. remove the alert so the code looks like this (for both arrows):

    if (ai == 0) {
        ai = 1