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.

I have but in a next button (‘.minibutton’), so that if the user gets the answer wrong 3 times they have a chance to move to the next question. The button also has a .trigger(‘click’) function so that when a word is completed correctly it moves on automatically and keeps the game flowing.

My problem is the button has stopped working and I am clueless as to why. Here is the “.minibutton” function…

$('.minibutton').click(function() {
var sum = $('#answerlist li[data-answer="' + answer + '"]').data('sum');
$(right).val('');
$(wrong).val('');
$('td').removeClass('spellanswer');
score.wrong = 0;
var r = rndanswer;
while (r == rndanswer) {
    rndanswer = Math.floor(Math.random() * (listOfanswers.length));
}

when I added this statement the button stopped working

 //for (var x = 0; x < listOfanswers.length; x++) {
    //if (eval(sum.replace("=", "").replace("x", "*")) == listOfanswers[x].name) {
       // rndanswer = x;
   // }
//}

$('td[data-answer="' + listOfanswers[rndanswer].name + '"]').addClass('spellanswer');
$('td[data-answer=' + answer + ']').removeClass('answerglow').removeClass('answerglow4').removeClass('answerglow3').css('color', 'transparent');

var noExist = $('td[data-answer=' + listOfanswers[rndanswer].name + ']').hasClass('answerglow2');
if (noExist) {
    $('.minibutton').prop('disabled', false);

} else {

    $('.sumstyle').text(sum);
    sum.hide();

}
}).trigger("click");

http://jsfiddle.net/ZAfVZ/28/

Answer 1

Running the jsFiddle gives this error:

Object 1 + 2 = has no method 'hide'

You’re trying to hide a string, which is obviously wrong. It’s causing the script to stop executing after that point. Remove/comment out sum.hide(), and the ‘next’ button appears after three wrong guesses.

I’ve edited the JSFiddle to define sum (a text string containing the sum that the player is trying to answer) and seumElem (the HTML element containing the sum) at the top of the function: http://jsfiddle.net/ZAfVZ/30/