How to detect when one div leaves the boundary of it's parent div

I’m making a basic Soccer style game where the player moves the ball left and right using the arrow keys and shoots the ball into the goal.

So far I’ve managed to make the arrow keys move the ball the way I want using this code:

//Setting arrow key functionality let projectile = document.getElementById('projectile'); let moveBy = 10; window.addEventListener('load', () => { projectile.style.position = 'relative'; projectile.style.left = 0; }); window.addEventListener('keydown', (e) => { switch (e.key) { case 'ArrowLeft': projectile.style.left = parseInt(projectile.style.left) - moveBy + 'px'; break; case 'ArrowRight': projectile.style.left = parseInt(projectile.style.left) + moveBy + 'px'; break; } });

Now I’m trying to make it so the ball div can’t move left or right outside the parent div, or the “field”.
I’ve used element.getBoundingClientRect to define a variable that contains the x and y values of the ball divs position, but I want those values to update as the user moves the ball left and right.

My problem is I can’t figure out how to update the DOMRect values as the user moves the ball left and right so that it can tell when the ball is moving out of the field. If anyone can help I would be very appraciative.