Aghasi Grigoryan Aghasi Grigoryan - 9 days ago 8
Javascript Question

I need help to move div when on Key Code 39 and 37

Guys, I have a div, when clicking on it, it is going right,
Now I need help, to make it go right when pressing Key Code 39, and left when Pressing key 37.



myDiv.onclick = function() {
animate(function(timePassed) {
myDiv.style.left = timePassed / 5 + 'px';
}, 3000);
};

// Рисует функция draw
// Продолжительность анимации duration
function animate(draw, duration) {
var start = performance.now();

requestAnimationFrame(function animate(time) {
// определить, сколько прошло времени с начала анимации
var timePassed = time - start;

console.log(time, start)
// возможно небольшое превышение времени, в этом случае зафиксировать конец
if (timePassed > duration) timePassed = duration;

// нарисовать состояние анимации в момент timePassed
draw(timePassed);

// если время анимации не закончилось - запланировать ещё кадр
if (timePassed < duration) {
requestAnimationFrame(animate);
}

});
}

#myDiv {
position: relative;
cursor: pointer;
height: 150px;
width: 220px;
background-color: red;
}

<div id="myDiv"> </div>




Answer

You need to add keydown event listener.

document.addEventListener("keydown", function(e) {
  e = e || window.event;
  switch (e.which || e.keyCode) {
    case 37:
      // go left code
      alert("left");
      break;
    case 39:
      // go right code
      alert("right");
      break;
  }
});

Here is an example with your code, just add your animation logic to cases...