my website, which uses jquery/javascript, doesn't work in ie9 and I'm not sure why

Question

I'm not skilled enough to figure out what part of this is tripping up in IE9. I have a game that displays a word, and when they click on a div, it animates a flipping action and displays a description related to the word.

In IE9, it loads the first words but will not animate and show the description. This is the first thing I've ever created in jquery/javascript. It's a Frankenstein's monster of a couple of different jquery libraries and some javascript.

• flipping action: http://lab.smashup.it/flip/ (this works in IE9..)
• xml2json @ fyneworks.com

What do I have to look into in order to get this to work?

Here's the code:

        <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Load jQuery
      google.load("jquery", "1");   
    </script>
    <script src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="js/jquery.flip.min.js"></script>
    <script src="js/jquery.xml2json.js" type="text/javascript" language="javascript"></script>
    <script type="text/javascript">
    var cC = 0;
    var flashcards;
    var aCards = [];
    var totalCards = Number(0);
    var cardToggle = Boolean(false); //not Flipped to start out
    $.get('xml/den204_fc_module01.xml', function(xml) {
        var flash = $.xml2json(xml);
        flashcards = flash.card;
        for (var i = 0, len = flashcards.length; i < len; i++) {
            var tempCards = flashcards[i];
            aCards.push({
                t: tempCards.term,
                d: tempCards.def
            });

            function shuffle(array) { // from: http://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array-in-javascript
                var counter = array.length, temp, index;
                while (counter > 0) {
                    index = (Math.random() * counter--) | 0;
                    temp = array[counter];
                    array[counter] = array[index];
                    array[index] = temp;
                }

                return array;
            }

            shuffle(aCards);
            totalCards = aCards.length;
            $('#containerFront').text(aCards[cC].t);
            $("#previousSet").addClass("disabled");
        }
    });
    $(document).ready(function() {
        $("#clickableCard").click(function() {
            if (cardToggle === false) {
                console.log('cardToggle is equal to false');
                cardToggle = true;
                $("#flipbox").flip({
                    direction: "tb",
                    color: "#ffd699",
                    content: "<div id='containerBack'>" + aCards[cC].d + "</div>",
                    speed: 400,
                });
            } else {
                console.log('cardToggle is equal to true');
                cardToggle = false;
                $("#flipbox").flip({
                    direction: "bt",
                    color: "#adc2d6",
                    content: "<div id='containerFront'>" + aCards[cC].t + "</div>",
                    speed: 400,
                });
            }
            return false;
        });
        $("#navi").click(function() {
            if (cardToggle === true) {
                console.log('cardToggle is equal to true');
                cardToggle = false;
                $("#flipbox").flip({
                    direction: "bt",
                    color: "#adc2d6",
                    content: "<div id='containerFront'>" + aCards[cC].t + "</div>",
                    speed: 200,
                });
            }
            if (cC === 0) {
                $("#previousSet").addClass("disabled");
            } else {
                $("#previousSet").removeClass("disabled");
            }
            if (cC == (totalCards - 1)) {
                $("#nextSet").addClass("disabled");
            } else {
                $("#nextSet").removeClass("disabled");
            }
        });
        $("#nextSet").click(function() {
            console.log(cC);
            if (cC < (totalCards - 1)) {
                ++cC;
                $('#containerFront').text(aCards[cC].t);
                $('#containerBack').text(aCards[cC].d);
            } else {
                console.log("cC is not less than or equal the total number of cards!");
            }
        });
        $("#previousSet").click(function() {
            console.log(cC);
            if (cC > 0) {
                --cC;
                $('#containerFront').text(aCards[cC].t);
                $('#containerBack').text(aCards[cC].d);
            } else {
                console.log("cC is not greater then 0!");
            }
        });
    });
    </script>

Answer 1

Remove or comment out the console.log statements in your code. IE chokes on them unless the console is open.

To address SpYk3HH's comments below, this comes from one of Microsoft's own blogs:

Keep in mind you will not be able to see the output unless you have the developer tools open. You can see the console output on either the Console or Script tabs. Be careful when using console for debugging. If you leave a call to the console object in your code when you move to production and you do not have the developer tools displayed you will get an error message telling you console is undefined.

Answer 2

Remove all console.log from your code.

In IE9 the console object is only alive when you're in debugging mode.

If you do want to log stuff, you can do this,

if(console || console !== undefined){
   //log here
}