title: Image jumping to last position translation movement
body: <p>I have some buttons that move an image with translation, but when I press one button then another and then the first one again, it jumps to where I was the the last time I pressed the first button.</p>
  <p>Here is the JavaScript responsible for moving the image.</p>
  <pre><code>function transform(side, n) {
      let translatePixels = 0;
  
      if (side == 'right') {
          return function(e) {
              translatePixels += n;
              player.style.transform = `translate(${translatePixels}px)`;
          }
      }
      if (side == 'left') {
          return function(e) {
              translatePixels -= n;
              player.style.transform = `translate(${translatePixels}px)`;
          }
      }  
                         if (side == 'top') {
          return function(e) {
              translatePixels -= n;
              player.style.transform = `translateY(${translatePixels}px)`;
          }
      }     
  if (side == 'bottom') {
          return function(e) {
              translatePixels += n;
              player.style.transform = `translateY(${translatePixels}px)`;
          }
      }     
  }
  
  const translateRight = transform('right', 8);
  const translateLeft = transform('left', 8);
  const translateTop = transform('top', 8);
  const translateBottom = transform('bottom', 8);
  </code></pre>