Why when in a javascript object I change a property (for example, a small div in a matrix of divs), it is not displayed in its turn?

Here is the code:

// // Создание матрицы. // 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'; }

Here I draw a matrix of 400 small divs, then generate a random number, and try to make one of the squares black. As a result, the very first square (that is, in the upper left corner) is always black, and the last square (that is, in the lower right corner) is removed. Tell me, please, what is the error? Why it happens?

Supplemented.

CSS file:

 #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; }


    1 answer 1

    Perhaps a glitch in styles. Try the latter to replace

     matrix.children[r].className = 'cell black';

    Try adding IDs to items.

     div.setAttribute('id', 'div_'+i); div.className = 'cell'; matrix.appendChild(div);

    and then call via document.getElementById (); (something I do not like the array of children)