Не сработал код

Рейтинг: -1Ответов: 1Опубликовано: 21.01.2015

я скопировал код, но он не сработал.
Суть кода в том, что оранжевый шарик должен двигаться вниз на 20px в течение 10 мс.

Код html ("index.html"):

<!DOCUMENT html>
<html>
<head>
<meta  charset=utf-8">
<meta http-equiv="Content-Type" content="IE=edge">
<title> circle</title>
<style>
#circle{
background-color: orange;
height:100px;
left: 50px;
position: absolute;
top: 50px;
width: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="circle"></div>
<script scr="main.js"></script>
</body>
</html>

Код javascript ("main.js"):

(function(){
 var delay = 10,
     i = 0,
     startTimer = function(){
            var elem = document.getElementById("circle"),
        bottom = elem.offsetTop;

            console.log( bottom );

             if (i < 10){
             setTimeout(startTimer, delay);

            elem.style.top = bottom + 20+"px";
    }
     i++;
    };
    var timer = setTimeout(startTimer, delay);
});
javascript
Источник: Stack Overflow на русском

Ответы

▲ 2

Добавьте скобки для вызова вашей анонимной функции. Вот так: 

(function(){
 var delay = 10,
     i = 0,
     startTimer = function(){
            var elem = document.getElementById("circle"),
        bottom = elem.offsetTop;

            console.log( bottom );

             if (i < 10){
             setTimeout(startTimer, delay);

            elem.style.top = bottom + 20+"px";
    }
     i++;
    };
    var timer = setTimeout(startTimer, delay);
})(); //вот в этой строке

Можете еще задержку сделать побольше чтобы шарик не шел камнем вниз, а падал более плавно. Например delay = 50

Пример на jsfiddle

З.Ы. не учитесь по урокам с ютуба - там вас так научат, что не переучитесь