How do I make a paddle move in js

how do I make a this box move using JS I am trying to have my function point to a function and it won't point to it.

I tried calling the function using the call method then I tried there apply method.

I also have an animation working in CSS and I was wondering if I am creating the action in JS properly.

console.log("hi");
var animation = {
  move: function BoxRight(elem, pos, id) {
    return this.elem1 + this.pos + this.id;
  }
};

var elem1 = document.getElementById("RightAnimate");
var pos = 0;
var id = setInterval(animation.frame, 5000);
var x = function frame() {
  if (pos == 350) {
    clearInterval(id);
  } else {
    pos++;
    elem1.style.top = pos + "px";
    elem1.style.left = pos + "px";
  }
};

function arrowFunction(event) {
  var x = event.key;
  console.log(x);
  if (x == "ArrowLeft") {
    alert("You pressed the 'left' key!");
  }
  // You had an extra slash here
  // I want to call it down here!!
  // this is the issue

  if (x == "ArrowRight") {
    animation.BoxRight.call(elem1, 0, id);

    function frame() {
      return this;
    }
  }
}

  body {
  font-family: helvetica, arial, sans-serif;
  margin: 2em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
}

@-webkit-keyframes move-right {
  0% {
    background-color: red;
    right: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    right: 200px;
    top: 0px;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Hello!</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
  <div id="container">
    <!-- You are missing the end quote here. Also need a tabindex -->
    <div id="Right-animate" onkeydown="arrowFunction(event)" tabindex="0"></div>
  </div>
</body>

</html>

Solution

It isn't very clear what you are trying to do. I'm going to assume that you want animate the div to response to key presses.

Here is a simplified example that uses CSS animations to achieve this:

const offsetDistance = 50;
const div = document.getElementById('Right-animate');
let offset = { x: 0, y: 0 };

document.body.addEventListener('keydown', event => {
  if (event.key === 'ArrowLeft') {
    offset.x -= offsetDistance;
  } else if (event.key === 'ArrowRight') {
    offset.x += offsetDistance;
  } else if (event.key === 'ArrowUp') {
    offset.y -= offsetDistance;
  } else if (event.key === 'ArrowDown') {
    offset.y += offsetDistance;
  }
  div.style.transform = `translate(${offset.x}px, ${offset.y}px)`;
});

#Right-animate {
  width: 100px;
  height: 100px;
  background-color: deeppink;
  position: absolute;
  transition: transform 0.5s;
}

<div id="Right-animate"></div>