0

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/

Milo-J
  • 1,108
  • 2
  • 13
  • 26
  • ....Why not just put the JSFiddle in....? I'm **not** going to request it... – Barrie Reader Oct 18 '12 at 08:50
  • 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... – MassivePenguin Oct 18 '12 at 08:58
  • So I should take sum.hide() out right? Would .css('visibility', 'hidden') be better @MassivePenguin – Milo-J Oct 18 '12 at 09:00
  • I think the issue is that you're redefining what `sum` is halfway through the script. What should `sum` actually refer to? – MassivePenguin Oct 18 '12 at 09:04
  • variable sum contains a string value not an elemnt. You must try to hide an element, declare `var sumElem = $('#answerlist li[data-answer="' + answer + '"]')` and then give `sumElem.hide()` – Anupam Oct 18 '12 at 09:04
  • sum is data-sum in the HTML. It is the text output into the div ".sumstyle". So your saying it needs to be defined further up? @MassivePenguin – Milo-J Oct 18 '12 at 09:07

1 Answers1

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/

MassivePenguin
  • 3,701
  • 4
  • 24
  • 46
  • This happens anyway. It just doesn't work. I have taken the sum.hide() statements out now. I just can't work out why it doesn't work, it isn't disabled and it was working fine before I added 'for (var x = 0; x < listOfanswers.length; x++) { if (eval(sum.replace("=", "").replace("x", "*")) == listOfanswers[x].name) { rndanswer = x; } }' @MassivePenguin – Milo-J Oct 18 '12 at 09:27
  • That's great, but do you have any idea why the button doesn't work because I don't think that's the reason. If you read the comment above, it all started happening when I added the if statement. Check question edit @MassivePenguin – Milo-J Oct 18 '12 at 09:37
  • Part of the problem seems to be related to `chosenanswers`: this list is full of blanks, which is causing errors further down. What should this list look like? – MassivePenguin Oct 18 '12 at 10:05
  • 'chosenanswers' should be the randomly selected 'data-answers' from the
  • that populate the grid @MassivePenguin
    • – Milo-J Oct 18 '12 at 10:11
  • I'm not sure why, but your 'chosenanswers' list is sporadically getting html elements (list items) instead of values. I'm not sure how much more help I can be - the code seems overly complex for what you're trying to achieve and you're redefining variable names all over the place. It might be worth taking a step back and abstracting your code, keeping variables unique and in proper scope. Sorry. – MassivePenguin Oct 18 '12 at 11:23
  • How about now. I have renamed a few things http://jsfiddle.net/ZAfVZ/31/ @MassivePenguin – Milo-J Oct 18 '12 at 13:41
  • Now the problem is that answer is sporadically undefined. I can't find where this is declared in global scope. The code is still rather messy. – MassivePenguin Oct 18 '12 at 14:32
  • So this is the reason the button isn't working? What exactly do I have to do? @MassivePenguin – Milo-J Oct 18 '12 at 14:35
  • You need to find out why `answer` is (sometimes) undefined. You're already using console logs to test things, so just break down the process step-by-step to find out where your code is going wrong. On the occasions where `answer` is defined, the code all works, so it looks like you're close: see http://jsfiddle.net/ZAfVZ/32/ – MassivePenguin Oct 18 '12 at 14:38
  • Is that why sometimes when I run the program nothing at all shows up? When I find where it is undefined, how do I define it? @Massive Penguin – Milo-J Oct 18 '12 at 14:42
  • That's correct. Are you actually using your browser's console? You've added a bunch of `console.log()` statements, which only show up if you have it open. It looks like you need to define your answer in global scope - you should read up on variable scope (http://stackoverflow.com/questions/500431/javascript-variable-scope) to understand more. – MassivePenguin Oct 18 '12 at 14:47
  • I'm using firebug @MassivePenguin – Milo-J Oct 18 '12 at 14:57
  • If you're using FireBug, you can (and probably do) see the console.log messages appearing under the 'console' tab. Step through your code one piece at a time, using these messages to log variable values. That way, you can see which function is failing and take appropriate action. It's basic debugging ;) – MassivePenguin Oct 18 '12 at 15:03
  • With the version you gave me. Version 32. What exactly has changed because it has taken me back to when the answer and the sum do not link up. How can I do this? @MassivePenguin – Milo-J Oct 18 '12 at 15:43
  • You could start by debugging your code a bit more thoroughly. You can figure out why they're not linking up on your own, I'm sure. – MassivePenguin Oct 18 '12 at 15:45