Fat cats dancing
 I am not sure why my cats are not moving at all. I am pretty sure they are suppose too. Can someone point me into if they are suppose to and or what I did wrong thanks.
    

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
        <title>Fat Cat Dancing</title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <script type= "text/javscript">
      <![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); 
    }
    ]]>
    </script>
      </head>
      <body>
      <h1>Fat Cat Dancing</h1> 
      <p><img src="fatcat1.gif" name="animation" alt="animation" id="animation"/></p> 
      <form action= ""> 
      <input type="button" name="run" value="Start Dancing" onClick="startDancing();"/>
      <input type="button" name="stop" value="Stop Dancing " onClick="clearInterval(begin);"/>
     </form>
     </body>
    </html> 
Fat cats dancing
===

 I am not sure why my cats are not moving at all. I am pretty sure they are suppose too. Can someone point me into if they are suppose to and or what I did wrong thanks.
    

       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
        <title>Fat Cat Dancing</title>
      <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
      <script type= "text/javscript">
      <![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); 
    }
    ]]>
    </script>
      </head>
      <body>
      <h1>Fat Cat Dancing</h1> 
      <p><img src="fatcat1.gif" name="animation" alt="animation" id="animation"/></p> 
      <form action= ""> 
      <input type="button" name="run" value="Start Dancing" onClick="startDancing();"/>
      <input type="button" name="stop" value="Stop Dancing " onClick="clearInterval(begin);"/>
     </form>
     </body>
    </html> 