How to paint an element in screen using javascript?

[polaryeti]

<div class="body">
    <div id="board">
      <div id="bat" class="bat"></div>
      <div id="ball" class="ball"></div>
    </div>
  </div>

This is my HTML.
I've done CSS For all of them and generated this:

Now, I want the bat to move left and right when I press arrow keys.

window.addEventListener("keydown", function (e) {

  switch (e.key) {
    case "ArrowLeft":
      batDir.x = -1;
      batDir.y = 0;
      paintBat(batDir.x, batDir.y);
      break;
    case "ArrowRight":
      batDir.x = 1;
      batDir.y = 0;
      paintBat(batDir.x, batDir.y);
      break;

  }
})

My goal is to paint the bat at new position. I'm wondering how to do it.

The logic should be

newBatPosition.x=oldBatPosition.x+batDirection.x
newBatPosition.y=oldBatPosition.y+batDirection.y

But what will do the job of painting newBatPosition.x and newBatPosition.y is what I'm not clear of. I'm not using canvas.

Plus, what'll be the oldBatPosition? I've used CSS to paint them. So, I'm wondering how do I get oldBatPosition coordinates as well.

I just made a similar project using tutorial and it's just disheartening that I can't make this project.

https://codepen.io/pelko/pen/jOpBmPN

 

[Kuncode]

To paint the bat at a new position, you can use the style property of the div element with the id bat to update its left and top position. You'll need to keep track of the old position in variables.

Here's an updated code example

const bat = document.getElementById("bat");
let oldBatPos = { x: 0, y: 0 };
let batDir = { x: 0, y: 0 };

window.addEventListener("keydown", function (e) {
  oldBatPos.x = parseInt(bat.style.left) || 0;
  oldBatPos.y = parseInt(bat.style.top) || 0;

  switch (e.key) {
    case "ArrowLeft":
      batDir.x = -1;
      batDir.y = 0;
      break;
    case "ArrowRight":
      batDir.x = 1;
      batDir.y = 0;
      break;
  }

  const newBatPos = {
    x: oldBatPos.x + batDir.x,
    y: oldBatPos.y + batDir.y
  };
  bat.style.left = `${newBatPos.x}px`;
  bat.style.top = `${newBatPos.y}px`;
});

Note: This code assumes that the bat's starting position is at (0, 0).