Не работает скрипт
Добрый день, прохожу онлайн курс js с нуля до результата. На уроке 3.1 возник вопрос, благодаря которому я не могу продвинуться также. Квадрат не перемещается вдоль обозначенной диагональной линии, хотя делаю все 1 в 1. Помогите, пожалуйста. Вот мой код:
Код HTML:
<body>
<button class="btn">Animation</button>
<div class="border">
<div class="box"></div>
</div>
<script src="js.js"></script>
Код Java Script:
let btn = document.querySelector('.btn'),
elem = document.querySelector('.box');
function myAnimation() {
let pos = 0;
let id = setInterval(frame, 10);
function frame () {
if (pos == 300) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
btn.addEventListener('click', myAnimation);