Question

EDIT**

In a game I am creating I use the next question button to move onto other questions in the grid if the user is having trouble with the current one. At the moment I have had real problems with it as it keeps on crashing my program, and not giving any console errors. The last problem I had with it was that it said “too much recursion”. Since then I thought I had sorted the problem, but I have just done a few tests and it crashes every time.

This is the click event for the button…

//Next question click event
$('.next-question').bind("click", function() {
    $('td').removeClass('highlight-problem');
    shuffleEqually(listOfWords);
    shuffleEqually(nextWordIndexes);
    var rndWord = nextWordIndexes[Math.floor(Math.random())];
    var rndWord = nextWordIndexes[2];
    //Adds and removes nesesary classes
    $('td[data-word="' + listOfWords[rndWord].name + '"]').addClass('highlight-problem');
    $('td[data-word=' + word + ']').removeClass('wrong-letter').removeClass('wrong-word').removeClass('right-letter');
    var spellSpace = $('td[data-word="' + listOfWords[rndWord].name + '"]').hasClass('right-word');
    if (spellSpace) {
        $('.next-question').trigger('click');
    } else {
        $("#hintSound").attr('src', listOfWords[rndWord].audio);
        hintSound.play();
        $("#hintPic").attr('src', listOfWords[rndWord].pic);
        $('#hintPicTitle').attr('title', listOfWords[rndWord].hint);
    }
});

I think it may have something to do with the if statement, but have tried changing it to this..

if (spellSpace == false) {

    $("#hintSound").attr('src', listOfWords[rndWord].audio);
    hintSound.play();
    $("#hintPic").attr('src', listOfWords[rndWord].pic);
    $('#hintPicTitle').attr('title', listOfWords[rndWord].hint);
}

and it makes it even worse

ShuffleEqually:

//Shuffles words to randomize
shuffleEqually(nextWordIndexes);
var shuffledWords = [];
shuffledWords = chosenWords.sort(function () {
    return 0.5 - Math.random();
});

function shuffleEqually(a1, a2) {
    var arrays = [];
    if (typeof a1 === 'object' && a1.length > 0) {
        arrays.push(a1);
    }
    if (typeof a2 === 'object' && a2.length > 0) {
        arrays.push(a2);
    }
    var minLength = arrays[0].length;
    jQuery.each(arrays, function (i, a) {
        minLength = a.length < minLength ? a.length : minLength;
    });
    var randoms = [];
    for (i = 0; i < minLength; i++) {
        randoms.push(Math.random());
    }
    jQuery.each(arrays, function (i, a) {
        var i = minLength;
        while (i--) {
            var p = parseInt(randoms[i] * minLength);
            var t = a[i];
            a[i] = a[p];
            a[p] = t;
        }
    });
};

Hint sound:

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

Answer 1

Your issue is an infinite loop, plain and simple.

$('.next-question').bind("click", function() {
// binds click...
...


if (spellSpace) {
    $('.next-question').trigger('click');
    // triggers click ON THE SAME ELEMENT COLLECTION (same selector)

You want to refine this. I assume you want the trigger to work on the next question, so I suggest changing the second statement to:

 $(".next-question").eq(($(".next-question").index($(this)) + 1) % $(".next-question").length).trigger("click");

You have a second infinite loop in shuffleEqually:

   jQuery.each(arrays, function (i, a) {
    var i = minLength;
    while (i--) {
        var p = parseInt(randoms[i] * minLength);
        var t = a[i];
        a[i] = a[p];
        a[p] = t;
    }

Change the while condition to have a limiting value, or it will loop endlessly (as a decrement operation always succeeds).