Почему когда в javascript объекту меняю свойство (например, маленькому div в матрице div'ов), он выводится не в своей очереди?
Вот код:
//
// Создание матрицы.
//
function createMatrix() {
var matrix = document.getElementById('matrix');
var n = 20 * 20;
for (var i = 0; i < n; i++) {
var div = document.createElement('div');
div.className = 'cell';
matrix.appendChild(div);
}
r = (randomcell(0, 399));
alert(r);
matrix.children[r].className = 'black';
}
Здесь я рисую матрицу из 400 маленьких дивов, после генерирую случайное число, и пытаюсь сделать один из квадратиков чёрным. Вследствие самый первый квадратик (то-бишь в самом верхнем левом углу) всегда чёрный, а последний квадратик (то-бишь в самом нижнем правом углу) убирается. Подскажите, пожалуйста, в чём ошибка? Почему так происходит?
Дополнено.
CSS файл:
#score
{
width: 400px;
height: 20px;
text-align: right;
}
#matrix
{
width: 400px;
height: 400px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}
#matrix .cell
{
float: left;
width: 19px;
height: 19px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
#matrix .black
{
width: 19px;
height: 19px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
background: #000;
}