Javascript animation of a cat
<p>The cat that is on this web page is suppose to move when you click it to move and stop moving when you click it. For some reason mine is not doing it. I do not receive any errors either. Can someone point me in the direction of what I am doing wrong?</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Fat Cat Dancing&lt;/title&gt;
&lt;meta http-equiv="content-type" content="text/html;charset=UTF-8" /&gt;
&lt;script type= "text/javscript"&gt;
&lt;![CDATA[
  var cats = new Array(3);
  var fatCat = 0; 
  var direction; 
  var begin; 
  cats[0] = "fatcat0.gif"; 
  cats[1] = "fatcat1.gif"; 
  cats[2] = "fatcat2.gif";

  function dance() { 
    if (fatCat == 0)     
      direction = "right"; 
    else if (fatCat == 2)          
      direction = "left"
    if (direction == "right")     
      ++fatCat;     
    else if (direction == "left")         
      --fatCat;     
    document.animation.src = cats[fatCat];     
  } 
  function startDancing() {     
    if (begin)         
      clearInterval(begin);     
    begin = setInterval("dance()",200); 
  }
]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;Fat Cat Dancing&lt;/h1&gt; 
&lt;p&gt;&lt;img src="fatcat1.gif" name="animation" alt="animation" id="animation" /&gt;&lt;/p&gt; 
  &lt;form action=""&gt; 
    &lt;input type="button" name="run" value="Start Dancing" onClick="startDancing();" /&gt;
    &lt;input type="button" name="stop" value="Stop Dancing" onClick="clearInterval(begin);" /&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt; 
</code></pre>
