Перемещение div-а при нажатии на кнопку

Question

Например есть div, как передвигать его кнопками? например при нажатии на d, переместить его налево и тд. там вроде есть onkeypress = keycode 87 что то вроде этого,

left = 0
top = 0
//up
if(если нажато w){
   document.querySelector(".div").style.left = top + 10px
}
//down
if(если нажато s){
   document.querySelector(".div").style.left = top - 10px
}
//left
if(если нажато a){
   document.querySelector(".div").style.left = left + 10px
}
//right
if(если нажато d){
   document.querySelector(".div").style.left = left - 10px
}

Answer 1

if (keypress == 87) {
   document.querySelector(".div").style.top = (top = top + 10) + 'px';
}
...

let elTop = 0;
let elLeft = 0;

function moveElement(evt) {
  let keypress = evt.keyCode;
  if (keypress == 38) {
    document.querySelector(".div").style.top = (elTop = elTop - 10) + 'px';
  }
  if (keypress == 40) {
    document.querySelector(".div").style.top = (elTop = elTop + 10) + 'px';
  }
  if (keypress == 37) {
    document.querySelector(".div").style.left = (elLeft = elLeft - 10) + 'px';
  }
  if (keypress == 39) {
    document.querySelector(".div").style.left = (elLeft = elLeft + 10) + 'px';
  }
}
document.addEventListener("keydown", moveElement);

.div {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0px;
  left: 0px;
  border: 1px solid black;
  background: lightgreen;
}

<div class="div"></div>

БЛОГ НА HUSL

Перемещение div-а при нажатии на кнопку

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