Currently, I have a computer science test at school, and the main question is to create a traffic light that changes colors in a loop using arrays. I am facing some challenges with this question, but I believe I am close to solving it. Below is my code snippet.
<!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>
While testing my code, I noticed that the loop functions correctly, transitioning between the different image names. However, instead of displaying the actual images, the page shows the words like "red.jpg" and "orange.jpg." This issue suggests that there might be an error in how I've handled the images. All my HTML files and images are saved in the same location. As a new programmer at 14 years old, this problem is quite challenging for me. Any guidance or assistance on resolving this would be greatly appreciated!