Find x-axis location to make an element move

Question

I'm trying to make an element move backward on the X axis when the user presses "a". However, I don't know how to make it move farther every time the users presses that key :(. I'm new to JS

document.addEventListener("keypress", function (e) {
  let moveBy = 20;
  if (e.key === "a") {
    moveBy++;
    element.style.webkitTransform = `translateX(-${moveBy}px)`;
  }
}

Thank you!

Answer 1

Define moveBy outside of function and increment every keypress

const element = document.querySelector('div');
  let moveBy = 20;

document.addEventListener("keypress", function (e) {
  if (e.key === "a") {
    moveBy++;
    element.style.webkitTransform = `translateX(-${moveBy}px)`;
    moveBy+=20
  }
})

div {

width: 200px;
height: 200px;
background: red;
}

<div></div>