Question

foo = document.getElementById("outer");

function cycleIt() {
    if (client.browser.Firefox) {
        foo.addEventListener("animationend", updateClassName, true);
    } else {
        foo.addEventListener("webkitAnimationEnd", updateClassName, true);
    }
}

function updateClassName() {

    var z = foo.getAttribute("class");

    if ( z == "a" ) {
        foo.className = "b";
    } else if ( z == "b" ) {
        foo.className = "c"
    } else if ( z == "c" ) {
        foo.className = "d"
    } else {
        foo.className = "a"
    }
    return foo;
}

Someone told me on the Javascript Chat Channel I should make a hash table for the multiple if then statements. How would I go about that?

Answer 1

What you would do is map z values to class names, like so:

function updateClassName() {
    foo.className = ({
        a: "b",
        b: "c",
        c: "d"
    })[foo.className] || "a";
    return foo;
}

The object literal is the map specifying what old value (key) should go to which new one (value). Additionally, it uses || "a" to specify a default case.