Javascript moving div to new position with arrow keys

Question

I want to make a div able to move with arrow keys in 4 direction with multikey support (ex moving to top left) onkeypress . When i click some of the arrows i expect moving to that direction until i put my finger up from that button. Although the move is just once which i don't understand why is happening.

 function place(id,x_pos, y_pos) { var element = document.getElementById(id); element.style.position = "absolute"; element.style.left = x_pos+'px'; element.style.top = y_pos+'px'; } setInterval(update,1); function update(){ document.addEventListener('keydown', keyPress); } function keyPress(e) { var x = e.keyCode; switch (x) { case 37: place('move', move.style.left-10, move.style.top); break; case 39: place('move', move.style.left+10, move.style.top); break; case 38: place('move', move.style.left, move.style.top-10); break; case 40: place('move', move.style.left, move.style.top+10); break; } // console.log(x); } 

 *{ margin:0; padding:0; } div#move{ background-color:yellow; width:5vw; height:5vw; } 

 <div id='move'></div> 

Answer 1

The problem with your code is that element.style.left give result as 10px and when you add 10 on 10px it will be a string like 10px10 which will make the property value incorrect .Since the first time the property is not set so first assignment id working fine. You need to get the left and right in numerical.

You also do not need to bind the update function with document with setInterval. Once is enough.

Check the code below

 function place(id,x_pos, y_pos) { var element = document.getElementById(id); element.style.position = "absolute"; element.style.left = x_pos+'px'; element.style.top = y_pos+'px'; } function update(){ document.addEventListener('keydown', keyPress); } function keyPress(e) { var x = e.keyCode; var move = document.getElementById("move").getBoundingClientRect(); var left = parseInt(move.left,10); var top = parseInt(move.top,10) switch (x) { case 37: place('move', left -10, top); break; case 39: place('move', left+10, top); break; case 38: place('move', left, top-10); break; case 40: place('move', left, top+10); break; } // console.log(x); } update(); 

 *{ margin:0; padding:0; } div#move{ background-color:yellow; width:5vw; height:5vw; } 

 <div id='move'></div> 

Answer 2

You don't need setInterval. Just register your listener, and it will handle every keypress.

document.addEventListener('keydown', keyPress);


function keyPress(e) {
  var x = e.keyCode;
  switch (x) {
    case 37:
     place('move', move.style.left-10,  move.style.top);
      break;

    case 39:
   place('move', move.style.left+10,  move.style.top);
      break;

    case 38:
    place('move', move.style.left,  move.style.top-10);
      break;

    case 40:
     place('move', move.style.left,  move.style.top+10);
      break;
  }
 // console.log(x);
}

Answer 3

 const move=document.getElementById('move'); var moveLeft = 0; function direction(e){ if(e.keyCode==39){ moveLeft +=2; move.style.left = moveLeft + 'px'; if(moveLeft>=600){ moveLeft -=2; } } if(e.keyCode==37){ moveLeft -=2; move.style.left = moveLeft + 'px'; } if(e.keyCode==38){ moveLeft -=2; move.style.top = moveLeft + 'px'; if(moveLeft>=600){ moveLeft +=2; } } if(e.keyCode==40){ moveLeft +=2; move.style.top = moveLeft + 'px'; } } document.onkeydown = direction; 

 #move{ position: absolute; height: 50px; width: 50px; background-color: yellow } 

 <div id="move"></div>