title: Javascript offsetLeft doesn't work
body: <p>Here's code where I want to use it:</p>
  
  <pre><code>   if(e.keyCode==32)
     {
      var c=document.createElement("img");
      c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
      c.id="ball";
      c.style.top=down+"px";
      document.body.appendChild(c);
       setTimeout(function move(){
       c.style.left=1200+"px";
     },200);
       setTimeout(function kill(){
       c.style.opacity=0;
      },700);
     }
    };
  </code></pre>
  
  <p>It's actually a moving ball which moves to certain coords after pressing space.I need to map it's coordinates when it's moving.When I use this:</p>
  
  <pre><code>var elem=document.getElementById("ball");
  alert(elem.offsetLeft);
  </code></pre>
  
  <p>It does nothing and additionally it makes whole code in <code>if()</code> block not working.My browser is Chrome.</p>
  
  <p>Here's a whole code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;style&gt;
    #rocket
    {
     width:50px;
     height:50px;
     position:absolute;
     top:0;left:0;
     transition:top 0.4s, bottom 0.4s;
     }
     #ball
     {
     width:15px;
     height:15px;
     position:absolute;
     transition:left 0.5s;
     }
   &lt;/style&gt;
  
   &lt;script&gt;
    var down=0;
    var up=0;
    document.onkeydown=function(e){
    e=e||window.event;
     if(e.keyCode==40)
     {
      down=down+30;
      document.getElementById("rocket").style.top=down+"px";
     }
     if(e.keyCode==38)
     {
      down=down-30;
      document.getElementById("rocket").style.top=down+"px";
     }
     if(e.keyCode==32)
     {
      var c=document.createElement("img");
      c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
      c.id="ball";
      c.style.top=down+"px";
      document.body.appendChild(c);
       setTimeout(function move(){
       c.style.left=1200+"px";
     },200);
       setTimeout(function kill(){
       c.style.opacity=0;
      },700);
     }
    };
  
    document.onclick=function(e){
    var y=e.pageY;
    document.getElementById("rocket").style.top=y+"px";
    down=y;
    };
  
   &lt;/script&gt;
  
   &lt;img src="http://0.static.wix.com/media/a8b510_fc007f8eedd9f304c54ac6d374e3ee0b.gif_1024" id="rocket"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>