Question

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/

Answer 1

Data-letter and data-word are blank on every table cell. That’s why your code is failing.

Edit: see this JSFiddle for a working example. When assigning data-letter to your table cell you were missing a string cast (word.toString()[k]). You still have a handful of table cells with no answer and no data-word – is this intentional?