Randomly storing elements from an array into a table

Question

I'm trying to create a simple memory matching game and I'm having trouble assigning one number to each table cell from my cardValues array. My giveCellValue function is supposed to generate a random number then pick that number from the array and give it to one of the table cells but I'm a little over my head on this one and having trouble accomplishing this task.

var countCells;
var cardValues = [];
var checker = true;
var createTable = function (col, row) {
    $('table').empty();
    for (i = 1; i <= col; i++) {
        $('table').append($('<tr>'));
    }
    for (j = 1; j <= row; j++) {
        $('tr').append($('<td>'));
    }
    countCells = row * col;
};
createTable(3, 6);
for (i = 1; i <= countCells / 2; i++) {
    cardValues.push(i);
    if (i === countCells / 2 && checker) {
        checker = false;
        i = 0;
    }
}

var giveCellValue = function () {
    var random = Math.ceil(Math.random() * cardValues.length) - 1;
    for (i = 0; i <= cardValues.length; i++) {
        $('td').append(cardValues[random]);
        cardValues.splice(random, 1);
    }
};

giveCellValue();
console.log(cardValues);

Answer 1

Use

var countCells;
var cardValues = [];
var checker = true;

var createTable = function (col, row) {
    $('table').empty();
    for (var i = 0; i < col; i++) {
        $('table').append($('<tr>'));
    }
    for (var j = 0; j < row; j++) {
        $('tr').append($('<td>'));
    }
    countCells = row * col;
};
createTable(3, 6);

for (i = 0; i < countCells; i++) {
    cardValues.push(i % 9 + 1);
}

var giveCellValue = function () {
    var len = cardValues.length, tds = $('td');
    for (var i = 0; i < len; i++) {
        var random = Math.floor(Math.random() * cardValues.length);
        tds.eq(i).append(cardValues.splice(random, 1));
    }
};

giveCellValue();
console.log(cardValues);

Demo: Fiddle

Answer 2

Leaving aside the problems that have already been mentioned in the comments above...

If I understand it right, you want to assign each of the numbers in cardValues to a random table cell?

Seems like the problem is with this line:

var random = Math.ceil(Math.random() * cardValues.length) - 1;

What this does is generates a random number once. If you access the variable random at a later time, you're not calling the full line of code again, you're just getting the same value that was calculated the first time. E.g. if the above code runs, spits out '7' as its random number and stores that in random, then every time you go through the for loop, the value of random will always be '7' rather than being re-generated every time - make sense?

Try putting the randomiser inside the for loop - that way it will be run multiple times, generating a new random number every time:

var giveCellValue = function () {
    var random;
    for (i = 0; i <= cardValues.length; i++) {
        random = Math.ceil(Math.random() * cardValues.length) - 1;
        $('td').append(cardValues[random]);
        cardValues.splice(random, 1);
    }
};

Actually, I'd change line 4 above to random = Math.floor(Math.random() * cardValues.length); too which should have the same effect.