Can anybody see the error(s) in this code?

mvbf987 · #1 11-22-2009, 07:28 PM

I have to make a page that will display a picture (in this case a traffic light), with a start and stop button underneath. When you click the start button, the program is supposed to loop displayed pictures to make it seem like the picture is animated.

This is what I have done:

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Project_11-TrafficLight</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<script type="text/javascript">
/* <![CDATA[ */var StartChanging;

var light = new Array(3);
var curLight = 0;
for (var imagesLoaded=0; imagesLoaded < 3; ++imagesLoaded) {
     light[imagesLoaded] = new Image();
     light[imagesLoaded].src = "light"
           + imagesLoaded + ".gif";
}
function turn() {
     if (curLight == 2)
           curLight = 0;
     else
           ++curLight;
     document.images[0].src = light[curLight].src;
}
function startChanging() {
     if (StartChanging != null)
           clearInterval(StartChanging);
     StartChanging = setInterval("turn()", 47);
}
/* ]]> */
</script>
</head>

<body>
<p><img src="green.gif" alt="Green Traffic Light" height="110" width="80" /></p>
<form action="">
<p><input type="button" value=" Change "
onclick="startChanging();" />
<input type="button" value=" Stop "
onclick="clearInterval(StartChanging);" /></p>
</form>

</body>

</html>

The initial picture comes up, but when I click the button, it doesn't loop.
The browser doesn't tell me there's any errors..and I don't know what's wrong with it.

mrhoo · #2 11-23-2009, 12:10 AM

I'd check your images- the timer works, as you can see by writing to a div each time the src is supposed to change-

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Project_11-TrafficLight</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />

<script type="text/javascript">
/* <![CDATA[ */var StartChanging;

var light = new Array(3);
var curLight = 0;
for (var imagesLoaded=0; imagesLoaded < 3; ++imagesLoaded) {
     light[imagesLoaded] = new Image();
     light[imagesLoaded].src = "light"
           + imagesLoaded + ".gif";
}
function turn() {
     if (curLight == 2)
           curLight = 0;
     else
           ++curLight;
     document.images[0].src = light[curLight].src;
     document.getElementById('count').innerHTML+=document.images[0].src+'<br>';
}
function startChanging() {
     if (StartChanging != null) clearInterval(StartChanging);
     StartChanging = setInterval("turn()", 47);
}
/* ]]> */
</script>
</head>

<body>
<p><img src="green.gif" alt="Green Traffic Light" height="110" width="80" /></p>
<form action="">
<p><input type="button" value=" Change "
onclick="startChanging();" />
<input type="button" value=" Stop "
onclick="clearInterval(StartChanging);" /></p>
</form>
<div id='count'>
0
</div>
</body>

</html>

Palros · #3 11-23-2009, 02:05 AM

try

Code:

document.images[0] = light[curLight];

instead of

Code:

document.images[0].src = light[curLight].src;

if this doesn't work, try something else. - perhaps it doesn't like that "var StartChanging;" is on the same line as a comment.

Sometimes programming languages can be pretty picky. The problem with javascript is that errors often end up getting quietly suppressed. see if you can view error reports in your browser - even if all you can get from these is the line number where the error occured, this can still be very useful.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)