Javascript animation of a cat

Question

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?

<!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>

Besides some awkwardness, this code is fine. I could not find an error that would cause it to break. In fact, when I supplied my own images and ran the code, it worked perfectly. Could you please explain how "it is not doing it"? Does absolutely nothing happen when you click Start Dancing? Also provide what browser you're using. — Kranu, Apr 13 '11 at 00:54
I am using firefox browser and when i click to start dancing my cat does not move for some reason i am still trying to work on it. — norris1023, Apr 13 '11 at 12:47

iamandrus · Accepted Answer · 2011-04-13T00:30:02.607

 <!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/javascript">
  <![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);"/>

You forgot to delimit a few lines.

EDIT: Good eye, Zecc! You also spelled "javascript" wrong in your <script> tag.

As far as I'm aware, delimitation is optional in javascript, recommended, but optional: http://stackoverflow.com/questions/444080 — Aatch, Apr 13 '11 at 00:28
Sorry about that, I'm in PHP mode ATM. :S But his main problem was the ` — iamandrus, Apr 13 '11 at 00:30

Zecc · Answer 2 · 2011-04-13T00:33:03.817

2

First of all, your <script> tag reads text/javscript instead of text/javascript. That probably makes the whole script be ignored.

If after that it still doesn't work, try substituting document.animation.src = cats[fatCat]; with document.getElementById('animation').src = cats[fatCat];

edited Apr 13 '11 at 00:33

answered Apr 13 '11 at 00:27

Zecc

4,220
19
17

score 0 · Answer 3 · answered Apr 13 '11 at 00:37

Zecc's answer might be correct, I can't be bothered setting this up to test. However you're code style should be better. The indentation is all akimbo in the example, I hope thats just because of the way code in SO is formatted. But you are also missing brackets around most of the if statements, which compounds the problem of poor indentation

Is

if (begin)         
    clearInterval(begin);     
begin = setInterval("dance()",200);

correct, or should it be:

if (begin) {
    clearInterval(begin);     
    begin = setInterval("dance()",200);
}

because the code provided is ambiguous as to the meaning.

The original is correct. If the second one were active, the interval would never run, since begin is undefined at start. — Kranu, Apr 13 '11 at 00:46

Javascript animation of a cat

3 Answers3