Callback function to move the object down not rendering right

I have been trying to do some extra engineering work on my project as part of my javascript lab.
I managed to get my dodger to move to the left and right but not to the bottom. Also when I invoke the event to make it go down (moveDodgerBottom), it doesn't do as asked and instead moves it up.
Can someone please help me with my code?

const dodger = document.getElementById("dodger")
dodger.style.backgroundColor = '#FF69B4'
function moveDodgerLeft() {
const leftNumbers = dodger.style.left.replace("px", ""); //remember, the dodger styles left, right, etc are in relation to the parent object that it is placed within. 
const left = parseInt(leftNumbers, 10);
if (left > 0) {
dodger.style.left = `${left - 1}px`;
}
}
function moveDodgerRight() {
const rightNumbers = dodger.style.left.replace("px", "");
const right = parseInt(rightNumbers, 10);
if (right < 360) {
dodger.style.left = `${right + 1}px`;
}
}
function moveDodgerBottom() {
const bottomNumbers = dodger.style.bottom.replace("px", "");
const bottom = parseInt(bottomNumbers, 10);
if (bottom < 360) {
dodger.style.bottom = `${bottom + 1}px`;
}
}
//this function - moveDodgerBottom() makes the dodger go up instead of going down
function moveDodgerTop() {
const topNumbers = dodger.style.top.replace("px", "");
const top = parseInt(topNumbers, 10);
if (top < 0) {
dodger.style.bottom = `${bottom - 1}px`;
}
}
//this function moveDodgerTop doesn't seem to be working
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowLeft") {
moveDodgerLeft();
} else if (event.key === "ArrowRight") {
moveDodgerRight();
} else if (event.key === "ArrowUp") {
moveDodgerTop();
} else if (event.key === "ArrowDown") {
moveDodgerBottom();
}
});

I tried using the technique before to get the dodger to move to the left by changing the ${left - 1} and then to the right by ${left +1}. I understand that with the bottom, the dodger needs an input of ${bottom +1} so I was thinking that the dodger would require a ${bottom - 1} to make it go up.

Based on the pattern of the four functions you created, maybe you can change :

function moveDodgerTop() {
const topNumbers = dodger.style.top.replace("px", "");
const top = parseInt(topNumbers, 10);
if (top < 0) {
dodger.style.bottom = `${bottom - 1}px`;
}
}

with :

function moveDodgerTop() {
const topNumbers = dodger.style.bottom.replace("px", "");
const top = parseInt(topNumbers, 10);
if (top > 0) {
dodger.style.bottom = `${top - 1}px`;
}
}

Other method:

Instead of using style.left, style.right, style.top, or style.bottom, maybe style.transform is the right option to make the div move. Fill in style.transform with translate(x,y) where the value x represents the coordinates of the X axis and the value y represents the coordinates of the Y axis. Both values can be filled in pixels (px).

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const dodger = document.getElementById("dodger")
dodger.style.backgroundColor = '#FF69B4';
let position = {
x: 0,
y: 0
}
function moveDodgerLeft() {
position.x = position.x - 1;
}
function moveDodgerRight() {
position.x = position.x + 1;
}
function moveDodgerBottom() {
position.y = position.y + 1;
}
function moveDodgerTop() {
position.y = position.y - 1;
}
document.addEventListener("keydown", function(event) {
if (event.key === "ArrowLeft") {
moveDodgerLeft();
} else if (event.key === "ArrowRight") {
moveDodgerRight();
} else if (event.key === "ArrowUp") {
moveDodgerTop();
} else if (event.key === "ArrowDown") {
moveDodgerBottom();
}
dodger.style.transform = `translate(${position.x}px,${position.y}px`;
});

<!-- language: lang-css -->

#dodger {
width: 200px;
height: 200px;
}

<!-- language: lang-html -->

<div id="dodger"></div>

<!-- end snippet -->