Местонахождение переменной

Question

внутри let работает не корректно(после каждого нажатия let left и let top ставит 0) снаружи вообще не работает, есть какой вариант?

let left = 0;
let top = 0;

window.onkeydown = function move_left() {
  if(event.keyCode == 37) {
    left = left - 10;
    document.querySelector('.person').style.left = left+'px';
  } else if(event.keyCode == 39) {
    left = left + 10;
    document.querySelector('.person').style.left = left+'px';
  }
  
  if(event.keyCode == 38) {
    top = top - 10;
    document.querySelector('.person').style.top = top+'px';
  } else if(event.keyCode == 40) {
    top = top + 10;
    document.querySelector('.person').style.top = top+'px';
  }
};

.person {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div class="person">1</div>

Answer 1

Инициализируя let "вначале" вы получите ошибку SyntaxError: redeclaration of formal parameter "x", чтобы её обойти вы можете:

Инициализировать переменные через var;
Выполнять скрипт в самовыполняющейся функции:

(function() {
  let left = 0;
  let top = 0;

  window.onkeydown = function move_left() {
    if(event.keyCode == 37) {
     left = left - 10;
     document.querySelector('.person').style.left = left+'px';
    } else if(event.keyCode == 39) {
      left = left + 10;
      document.querySelector('.person').style.left = left+'px';
    }

    if(event.keyCode == 38) {
      top = top - 10;
      document.querySelector('.person').style.top = top+'px';
    } else if(event.keyCode == 40) {
      top = top + 10;
      document.querySelector('.person').style.top = top+'px';
    }
  };
})();

.person {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div class="person">1</div>

Использовать массив:

let param = {
    left: 0,
    top: 0
  };

window.onkeydown = function move_left() {
  if(event.keyCode == 37) {
   param.left = param.left - 10;
   document.querySelector('.person').style.left = param.left+'px';
  } else if(event.keyCode == 39) {
    param.left = param.left + 10;
    document.querySelector('.person').style.left = param.left+'px';
  }

  if(event.keyCode == 38) {
    param.top = param.top - 10;
    document.querySelector('.person').style.top = param.top+'px';
  } else if(event.keyCode == 40) {
    param.top = param.top + 10;
    document.querySelector('.person').style.top = param.top+'px';
  }
};

.person {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
}

<div class="person">1</div>

БЛОГ НА HUSL

Местонахождение переменной

Ответы (1 шт):