Только начал изучать js
. Решил писать 2048 (для поднятия скила), столкнулся с проблемой. Решил протестировать функцию, которая рандомно заполняет и рисует текущее состояние. Вызываю функции при нажатии на стрелки. При первом нажатии всё работает нормально, но при втором браузер виснет и пишет -
Cannot set property 'innerHTML' of null
var size = 4;
var counter = 0;
var matrix = [];
for (var i = 0; i < size; i++) {
matrix[i] = []
}
for (var i = 0; i < size; i++) {
for (var j = 0; j < size; j++) {
matrix[i][j] = 0;
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function get_number(matr) {
var tmpRow = getRandomInt(0, 3);
var tmpCol = getRandomInt(0, 3);
while (true) {
if (matr[tmpRow][tmpRow] === 0) {
matr[tmpRow][tmpRow] = 2;
break;
}
}
}
function drawFields(matr) {
get_number(matr);
for (var i = 0; i < size; i++) {
for (var j = 0; j < size; j++) {
if (matr[i][j] !== 0) {
var tmpField = document.getElementById("e" + counter);
tmpField.innerHTML = matr[i][j];
}
counter++;
}
}
}
window.onload = function() {
function handler(event) {
var KEY_CODE = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40
};
switch (event.keyCode) {
case KEY_CODE.LEFT:
alert(1);
break;
case KEY_CODE.UP:
alert(2);
break;
case KEY_CODE.RIGHT:
alert(3);
break;
case KEY_CODE.DOWN:
drawFields(matrix);
break;
default:
break;
}
}
window.addEventListener('keydown', handler, false);
}
'#elements
{
padding: 10px;
padding-right: 15px;
padding-top: 15px;
position: fixed;
top: 100px;
right: 400px;
background-color: #BBADA0;
width: 465px;
height: 465px;
}
.fields {
display: inline-block;
width: 107px;
height: 107px;
margin: 4px;
border-color: #BBADA0;
text-align: center;
float: right;
color: #776E65;
border-radius: 3px;
background: #eee4da;
line-height: 107px;
font-weight: bold;
z-index: 10;
font-size: 55px;
}
<div id="elements">
<div id="e0" class="fields"></div>
<div id="e1" class="fields"></div>
<div id="e2" class="fields"></div>
<div id="e3" class="fields"></div>
<div id="e4" class="fields"></div>
<div id="e5" class="fields"></div>
<div id="e6" class="fields"></div>
<div id="e7" class="fields"></div>
<div id="e8" class="fields"></div>
<div id="e9" class="fields"></div>
<div id="e10" class="fields"></div>
<div id="e11" class="fields"></div>
<div id="e12" class="fields"></div>
<div id="e13" class="fields"></div>
<div id="e14" class="fields"></div>
<div id="e15" class="fields"></div>
</div>
counter
back to 0 at the end ofdrawFields
.