АНИМАЦИЯ В JAVASCRIPT
я хотел создать анимацию как показано на уроке , но незнаю почему не работает несмог найти ошибку самостоятельно я скинул код можите ли проверить и найти ошибку в моем коде
HTML.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<button class="btn">Animation</button>
<div class="border">
<div class="box">
</div>
</div>
<script src="Untitled-1.js"></script>
</body>
</html>
CSS.
.box {
background-color: red;
height: 100px;
width: 100px;
}
.border{
border: 5px solid rebeccapurple;
height: 500px;
width: 500px;
}
.btn{
border: none;
background-color: yellow;
height: 40px;
width: 80px;
margin: 5px 10px 10px 5px;
}
JavaScript.
let btn = document.getElementsByTagName('button'),
elem = document.querySelector('box');
function myAnimation(){
let pos = 0;
let id = setInterval(frame, 10);
function frame(){
if(pos == 500){
clearInterval(id);
}else{
pos++;
elem.style.top= pos + 'px';
elem.style.left= pos + 'px';
}
}
}
btn.addEventListener('click', myAnimation);
