I want to make my traffic lights run automatically without any user input. I have created this code so far but the images don't show up please help. My code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lights=["red.jpg","redamber.jpg","green.jpg","amber.jpg"]
var lightscentre= 0;
var timer;
function LightCycle()
{
if(++lightscentre==4)
lightscentre=0
document.getElementById("red").setAttribute("src",lights[lightscentre]);
timer = setTimeout("LightCycle()",1000);
}
function stopCycle()
{
clearTimeout(timer);
}
</script>
</head>
<body>
<img src="red.jpg" name="red" id="red" width=130 height=175>
<form>
<input type="button" value="Cycle" name="Cycle" onclick="LightCycle()">
<input type="button" value="Stop" name="Stop" onclick="stopCycle()">
</form>
</body>
</html>
2 answers
Does the first red image show up on pageload? If not, then you know the problem is not with the JavaScript.
When I run the code an outline of the image is shown but the images do not appear?
1 answer