Maklay,
добавил вывод в консоль, где undefinite ?
<!DOCTYPE HTML>
<html>
<head>
<style>
#field {
width: 200px;
border: 10px groove black;
background-color: #00FF00;
position: relative;
}
#ball {
position: absolute;
}
</style>
</head>
<body>
<div id="field">
<img src="https://js.cx/clipart/ball.svg" id="ball"> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>
<script>
'use strict';
let field = document.getElementById('field');
let ball = document.querySelector('img');
let medX = field.clientWidth / 2;
let medY = field.clientHeight / 2;
let xStart = medX - ball.offsetWidth / 2;
let yStart = medY - ball.offsetHeight / 2;
ball.style.left = '0px';
ball.style.top = '0px';
let timerId = setTimeout(function doGoal() { console.log(ball.style.left)
if (parseInt(ball.style.left) < xStart) {
ball.style.left = (parseInt(ball.style.left) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
if (parseInt(ball.style.top) < yStart) {
ball.style.top = (parseInt(ball.style.top) + 1) + 'px';
} else {
clearTimeout(timerId);
return;
}
timerId = setTimeout(doGoal, 100);
}, 100);
</script>
</body>
</html>