CODEWITHSUNDEEP
javascriptanimationhtml
Gman
Gman

Reputation: 21

Animating dynamically created divs with javascript

I am trying to animate a dynamically created div with javascript, the id for the div is assigned when it is created, everything works fine until I attempt to animate one of the divs, I am trying this :

function start() // Called from a button click
{

  var moveDiv= document.getElementById('Id0'); // Id0 is the Id of the div to move
  animate(moveDiv); // Recursive animate
}

function animate(inDiv) 
{
  inDiv.style.left = parseInt(inDiv.style.left)+1+'px';
  setTimeout(animate,20); // Recursive call
}

I know this is supposed to move the div infinitely to the left. However nothing happens at all and I cannot figure out why, I don't think its the fact that I dynamically create the divs as I have checked all the Id's and they all exist so I don't think its because it can't find Id0, but just incase here is a snippet of my div creation code :

for(var i=0; i<ca.length; i++)
      {
          var c = ca[i].trim();
          var start = c.indexOf('"coursename":"') + 14;
          var end = c.indexOf('","coursemark":"');
          var CC = c.substring(start,end);

          var start = c.indexOf('","coursemark":"') + 16;
          var end = c.indexOf('%"')+1;
          var CM = c.substring(start,end);
          var idCount = i;
          var div = document.createElement("div");
          div.style.width = "180px";
          div.style.height = "75px";
          div.style.backgroundColor = "rgba(0,100,175,0.8)";
          div.style.color = "white";
          div.style.marginTop = "2%";
          div.style.marginLeft = "50%";
          div.id = "sortID"+idCount;
          div.innerHTML = "Course Name : " + CC +  " Course Mark : " + CM + " Id : " + div.id;
          document.body.appendChild(div);

      }

This code works fine however and creates the divs perfectly, I just can't get any div to move. Any help would be greatly appreciated.

Upvotes: 0

Views: 410

Answers (1)

Andrew
Andrew

Reputation: 446

Couple of problems...

function start() // Called from a button click
{
  var moveDiv= document.getElementById('Id0'); // Id0 is the Id of the div to move
  animate(moveDiv); // Recursive animate
}
  • There is no element with ID of Id0. All of your generated element IDs look like sortID...

And then...

function animate(inDiv) 
{
  inDiv.style.left = parseInt(inDiv.style.left)+1+'px';
  setTimeout(animate,20); // Recursive call
}
  • inDiv.style.left has never been initiated
  • You're not passing inDiv through to your recursive animate call

So firstly check your element references. Then make sure you're setting the position of the div correctly, or handling scenarios where it isn't yet set. And finally make sure you pass inDiv through recursively.

Upvotes: 1

Related Questions