Home/ Questions/Q 8374711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:58:59+00:00

Help! I’ve no idea what’s going wrong here, I’m following along a tutorial video

  • 0

Help! I’ve no idea what’s going wrong here, I’m following along a tutorial video from Tuts+ The code is exact, yet the blue box is not animating to the left.

When I put an alert inside of the moveBox function, I see in the console the alert firing off the same message over and over again.

Here is my test link:

> Trying to animation a blue box left using Javascript <

Here is a screenshot from the video:

enter image description here

Here is my code:

(function() {

var speed   = 10,       
    moveBox = function() {
        var el = document.getElementById("box"),
            i = 0,
            left   = el.offsetLeft,
            moveBy = 3;
            //console.log("moveBox executed " +(i+1)+ " times");

            el.style.left = left + moveBy + "px";

        if (left > 399) {
            clearTimeout(timer);
        }
    };

var timer = setInterval(moveBox, speed);

}());

HTML:

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>JavaScript 101 : Window Object</title>
<style>
    #box {
        position: abosolute;
        height: 100px;
        left: 50px;
        top: 50px;
        width: 100px;
        background-color: Blue;
    }
</style>
</head>

<body>

<div id="box"></div>
<script src="js/animation.js"></script>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You mispelled “absolute” in your positioning:

    #box {
    position: absolute;   // Your mispelling here
    height: 100px;
    left: 50px;
    top: 50px;
    width: 100px;
    background-color: Blue;
}

    Once I fixed that, it worked fine.

    A word of advice — put a second condition in loops like this so that if the animation fails for some reason you don’t end up in an infinite loop. For example, you might have done this:

    (function() {

var maxTimes = 1000;
var loopTimes = 0;
var speed = 10,       
moveBox = function() {
    var el = document.getElementById("box"),
        i = 0,
        left   = el.offsetLeft,
        moveBy = 3;
        //console.log("moveBox executed " +(i+1)+ " times");

     el.style.left = left + moveBy + "px";

     loopTimes += 1;
     if (left > 399 || loopTimes > maxTimes) {
         clearTimeout(timer);
     }
};

var timer = setInterval(moveBox, speed);

}());
    • 0