jQuery/JavaScript program breaks after completion number is changed

Question

In a spelling game I have created there is a grid that is populated with words. The aim of the game is to spell the words by clicking on the letters on the side, which animate into the empty spaces in the grid. Words are highlighted if they are to be spelt, so the user can see where to go next. The aim of the game is to spell the required amount of words in the grid to complete the game. I usually set this to two, but have just changed it to 3 and the program keeps breaking after I spell the second word.

    if (score.right == 3) {
    ................
    ................
}

Usually when you spell a word correctly I use a "click.trigger" function to move to the next highlighted word in the grid. At the moment after 2 correct ones the program either just doesn't go onto the next one or goes back to the last one and doesn't allow you to click the letters.

setTimeout(function() {
                    jQuery('.next-question').trigger('click');
                }, 1500);

I have tried to go through with break points but cannot seem to find the issue. Can someone help me to get it working again and tell me where I was going wrong?

At the moment in my game there is no hint pictures or hint sounds so to find the highlighted word you have to use the console. Try answering two right then it will crash.

Here is a fiddle for the broken one: http://jsfiddle.net/smilburn/Dxxmh/101/

Here is a fidddle to a previous one that worked fine: http://jsfiddle.net/smilburn/Dxxmh/100/ (some class names may have changed)

Answer 1

First thing. The images dont show in the new version because for their links, you're using relative path which doesnt exist as far as jsfiddle is concerned. The earlier one uses absolute links. Same thing goes for the audio files.

Next thing, at the beginning you have var definitions like

var hintPic = $("#hintPic")[0];

This statement returns the first element from the set as a plain DOM element. So later when you're trying to show it

hintPic.show();

It wont work because 'show' is a jquery function. Remove the [0]'s from the variable definitions and it should work just fine.