Question: I have three yellow bars and each of them needs to come from left to right. For that, I have produced this code, but it only works on the last one. Can anyone correct this code; I need to work with pure JavaScript. I am not using any framework. Thanks.

```
window.onload = function(){  

    var yellowTitles = document.getElementById('magazine-brief').getElementsByTagName('h2');

    for(i=0; i< yellowTitles.length; i++) {
        var header = yellowTitles[i];
        var timer = i*500;
        var yellowBar = setTimeout(animeYellowBar,timer);

        function animeYellowBar(){
           header.style.left= "0";
        }

    }

}

```

Answer: 
Here's how I'd solve the problem:

```
var yellows = document.getElementById('magazine-brief').getElementsByTagName('h2');

// this will force the header number to be bound correctly
// also animates the div across the page by tracking the current position of x
function createMotion(num){
  var currPos = 0;//current x position
  var delta = 10;//move by this amount
  setInterval(function(){
    currPos += delta
    yellows[num].style.left = currPos;
  }, num * 500);
}

for (var i = 1; i < yellows.length; i++)
{
  createMotion(i);
}

```

Note the function "createMotion" - added so the number "i" is correctly reference in the setInterval function.
By the time your timeout function runs, `header` refers to your last `h2`.

Try editing your timeout function to this:

```
function animeYellowBar(){
       var thisheader=header;
       thisheader.style.left= "0";
    }

```