I'm doing my exams at school and the main question of my computer science test is to make a traffic light, that loops through different colours using arrays. I'm currently stuck on this question, and I think I'm pretty close to solving it. Here's my code.

```
<!DOCTYPE html>
<html>
<head>
<style>
#myLight {
background-image:url(blank.png);
width:230px;
height:220px;
}
</style>
</head>
<body>
<div id="myLight"></div>
<script>
var myTraffic = document.getElementById('myLight');
var myPics = ['red.jpg','orange.jpg','green.jpg'];
var totalPics = myPics.length;
var i = 0;
function loop() {
if(i > (totalPics - 1)){
    i = 0;
}
myLight.innerHTML = myPics[i];
i++;
loopTimer = setTimeout('loop()',3000);
}
loop();
</script>
</body>
</html>

```

When I run this the loop seems to be working, as it loops through the different names of each image. At the top of my page for example, red.jpg will come up as words, then change to the words orange.jpg, and so on. Because of this I feel like there is some sort of problem with the way I've used images. I have my html saved in the same place with all my images. I'm only 14 and haven't been programming for long, so even though it's probably a fairly simple solution, this just hurts my brain...any help would be appreciated!