1

Только начал изучать 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>

4
  • Reset counter back to 0 at the end of drawFields.
    – user176262
    29 апр 2015 в 18:32
  • same problem(,but now i can make 2 iteration.But thanks.
    – SuperMan
    29 апр 2015 в 18:43
  • ну вот, теперь программа работает в два раза лучше чем раньше. В чем дело - понятно?
    – user176262
    29 апр 2015 в 18:45
  • решил проблему ,у меня было зацикливание.
    – SuperMan
    29 апр 2015 в 19:18

2 ответа 2

1
var tmpField=document.getElementById("e"+counter);
tmpField.innerHTML=matr[i][j];

Элемент с каким-то из id не существует.

-1

Попробуй Объявить переменную в отдельной функции и эту функцию вызови перед использованием переменной:

function varCounter(){
    var counter =0;
}


varCounter();
  /код с использованием этой переменной...
0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.