I am creating a simple numeracy game where by there is a grid populated with numbers. The numbers are hidden and when the game is run the grid space is highlighted. A div on the side produces a sum to help the user get the correct answer. The user then clicks the corresponding numbers that animate into position and signal whether they are right or wrong.

The problem I am having is that when the program is run a trigger('click') function should select an area at random in the grid and apply the class .spellword. This will highlight the area purple, indicating where to place an answer.

At the moment when I run the program nothing happens and I do not know why. I have made the same game but with words and it worked fine.

Here is the function for the button

$('.minibutton').click(function() {

$('.minibutton').prop('disabled', false);
$('.picstyle').show();
$('td').removeClass('spellword');
var r = rndWord;
while (r == rndWord) {
rndWord = Math.floor(Math.random() * (listOfWords.length));
}

$('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('spellword');
$('td[data-word=' + word + ']').removeClass('wordglow').removeClass('wordglow4').removeClass('wordglow3').css('color', 'transparent');

var noExist = $('td[data-word=' + listOfWords[rndWord].name + ']').hasClass('wordglow2');
if (noExist) {
$('.minibutton').click();

} else {

$('.picstyle').text(sum);

}

}).trigger("click");

Fiddle: http://jsfiddle.net/ZAfVZ/33/