Question

This is a very simple question/problem, and I can easily work around it, but since I’m learning javascript I was very eager to know WHY exactly this particular problem is happening.

$("#go").click(function() {
    $("p").append(array[x] + " ")
    functionlist[array[x]]()
    x++
})​

This does not work as I expect it to. I want it to write the current content of array, perform a simple animation that is associated with a certain function name, and then increment x. Everything works, except it doesn’t increment x.

If I do this:

$("#go").click(function() {
    $("p").append(array[x] + " ")
    //functionlist[array[x]]()
    x++
})​

x is incremented successfully.

So my question is, why does this happen?

Here is a link to a jsfiddle that I am using: http://jsfiddle.net/mxy6N/3/

Answer 1

Well, if you check your script console (F12 is most browsers), you’ll see that functionlist[array[x]]() throws an error something like:

Object has no method “smooch”

This is because array[x] is equal to “smooch”, and functionlist["smooch"] is undefined, so it errors out before it makes it to your x++.

Other things going on in this code:

• x is declared inside of your function, therefore it will always be 0 at the time it is used.
• even if it were declared outside of your function, as you increment it, it will run out of items to look at in your array. You’ll need to use a modulo operator or two here.
• You’re not referencing an .js files that have a definition for $.fn.transition, so your transition calls will also error out.
• flip and flop both have the same rotateY value, so once it “flips” it won’t “flop”

Here is something that might do what you’re looking to do: http://jsfiddle.net/g5mJd/3/

And the updated code:

var array = ["smooch", "jab", "flip"];
var move = "flip";
var x = 0;
var functionlist = {
    flip: function() {
        $("#block").transition({
            perspective: '0px',
            rotateY: '180deg'
        }, 1000);
    },
    flop: function() {
        $("#block").transition({
            perspective: '0px',
            rotateY: '0deg'
        }, 100);
    }
};


$("#go").click(function() {
    var functionName = (x % 2 == 0) ? 'flip' : 'flop';
    var fn = functionlist[functionName];
    if($.isFunction(fn)) {
        fn();
    }
    var say = array[x % array.length];
    $('p').append(say + ' ');
    x++;
})​;

EDIT: Updated with $.isFunction() check.